리덕스는 무엇일까

리덕스는 한마디로 말해 데이터 저장소이다.
조금 더 풀어말하면 상태관리 라이브러리다.
조금 더더 풀어말하면 전역 상태관리를 편히 할수있게 해주는 녀석이다.

설치는

npm install redux 
npm install react-redux

를 터미널에 때려넣어준다
(내 맥은 yarn을 받아들여주지 않았기에...npm을 쓴다..)

redux 사용을 위해 redux를 설치해야하고
리덕스에서 컴포넌트가 데이터를 읽어오게 하게끔 하려면 리액트-리덕트도 필요하다

여기서 기본적으로 알고있어야 할 상식 ->
1. 데이터를 전부 볼려고 하는 녀석들이 있다
2. 수정하려는 녀석들도 있다
3. 수정하려는 녀석이 수정을 하면 수정 후 데이터를 다른녀석들에게 보여줘야 한다

를 머릿속에 유념해두자.

이제 리덕스의 데이터 흐름에 대해 간략히 그림을 그려보면,

이렇다

데이터가 있으면 1, 2, 3, 4, 5번 컴포넌트가 있다고 치자.

이 때 (3, 4번 컴포넌트처럼 컴포넌트가 데이터를 사용하는 경우, '구독한다'라고 표현한다. 뒤에 나올 store와 component가 연결되어 있는 상태.)
데이터를 구독하는 컴포넌트가 데이터를 수정하고 싶어하면, 데이터는 뿅하고 별안간 바뀌지 않는다.
데이터는 수정함수를 호출해서, data를 수정하고, 수정된 data는 다시 바뀌었다는 신호를 보내는 절차를 거쳐 리듀서에서 수정된다. 리듀서는 실제 값이 바뀌는 곳이다.

이 때 수정하고 싶어하는 것을 데이터 바꾸는 액션을 일으킴 혹은 dispatch라고 부른다
위의 그림에서 3번이가 수정을 하고자 한다면
아래의 프로세스를 거쳐 수정이 될 것이다
액션을 일으킴->리듀서에서 값이 수정됨->4번이는 리듀서에서 수정한 데이터를 다시 받아옴->re-rendering->화면에 바뀐 data spread

조금 두서가 없다. 다시 정리해보자
state:상태값, data. dictioanary형태로 보관됨.
action:데이터 변경시 발생해야 하는 것. 이렇게 생김

const LOAD = 'word/LOAD';
const CREATE = 'word/CREATE';
const UPDATE = 'word/UPDATE';

Action-creator:액션생성함수. 액션을 리턴하는 함수로, 액션을 만들기 위해 액션을 리턴해주는 놈이다.
return 안에 들은것을 액션객체로 만들어서 반환하는 함수.

Reducer:Data를 실제로 바꾸어주는 놈. 아래처럼 생겨먹음

// Reducer
export default function word(state = initialState, action = {}) {
    switch (action.type) {
        case "word/LOAD": {
            return { list: action.word_list };//액션에 넣어놓은 word_list 교체
        }
        case "word/CREATE": {
            const new_word_list = [...state.list, action.word]
            return { list: new_word_list };
        }
        default:
            return state;
    }
}

Store:리듀서가 모여있는 공간. 스토어 안에 리듀서 포함이다. 상태값을 변경해주는 내장함수를 가진다.

dispatch:액션을 발생시키는 것을 보고 '디스패치'라고 함. 동사임.

위의 단어들은 이렇게 사용된다.
액션디스패치->리듀서 자동실행->데이터 자동수정->스토어 데이터 변경

그리고 리덕스는 세가지 규칙을 따른다.
1. Store는 한가지만 가진다(단일스토어 규칙)
2. state는 오직 action으로만 변경이 가능하다.
3. 리듀서는 언제나 같은 동작을 수행하는(Math.random()이런거 못씀, only 파라미터에 의존) 순수함수여야함.