[Redux] redux 기초 개념

1. Redux 구성과 작동방식

    a. state가 업데이트 되면 업데이트 정보가 담긴 Action 객체가 생성된다.
    b. Action 객체는 Dispatch 함수의 인자로 전달된다.
    c. dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.
    d. Reducer는 Action 객체의 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.
    e. 상태가 변경되면 React는 화면을 다시 렌더링한다.
    f. 데이터 흐름 : Action -> Dispatch -> Reducer -> Store

2. Store

-store은 단 하나. 중앙 데이터 저장소다.

3. Reduce 함수

-Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수입니다.
-Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수
a. 첫 번째 인자의 기본값을 설정해줘야 한다.
b. reducer 함수는 순수함수여야 한다. 외부 요인으로 인해 값이 변경돼서는 안 된다.
c. reducer가 여러 개인 경우
- combineReducers 메서드를 사용해서 여러 개의 reducer를 하나로 합칠 수 있다.
d. 예시

    const counterReducer = (state = count, action) => { 
      switch (action.type) {
        case 'INCREASE':
          return state + 1;  
        case 'DECREASE':
          return state - 1;
        case 'SET_NUMBER':
          return action.payload;
        default:
          return state;
      }
    };

5. Action 객체

-어떤 액션을 취할 것인지 정의해 놓은 객체.
a. type은 필수로 지정해야 한다. 대문자와 Snake Case로 작성한다.
b. payload는 옵션이다.
c. 보통은 action creator 함수를 사용한다.
d. 예시

    export const increase = () => {
      return {
        type: 'INCREASE'
      }
    }
    export const decrease = () => {
      return {
        type: 'DECREASE'
      }
    }

6. Dispatch

-dispatch는 Reducer로 Action을 전달해주는 함수.
a. Redux Hook 메서드(useDispatch())를 사용하여 Dispatch함수를 반환한다.
- 예시

import {increase, decrease} from './index.js'
dispatch( increase() );
dispatch( setNumber(5) );

- 여기까지는 아직 state를 받아오는 건 아님. 부모 컴포넌트에 Action을 전달했을 뿐이다.

7. useSelector()

- 컴포넌트와 state를 연결하여 redux의 state에 접근할 수 있게 해주는 메서드
- 이 단계에서 부모 컴포넌트의 state를 받아올 수 있음.
 const state = useSelector((state) => state);

8. 과제하면서 깨달은 TIL

- reducer함수가 새로운 state를 업데이트 할 때 기존의 state는 ...state로 한번에 다 받아와야한다.
나는 프로퍼티별로 items: state.items 이렇게 받아왔었는데 이렇게 안하는 것 같다(왜냐면 이러면 
새로운 프로퍼티가 추가됐을 때는 반영을 못하니까)
- 다만 새로 안 사실은 구조분해할당을 하더라도 결국에 객체의 주소값은 같다.