Redux (리덕스) - practice

참고 문서

My velog

Redux

1. 용어 설명

액션 생성함수 (action creator)

• 단순히 매개변수를 받아와서 액션 객체 형태로 만들어줌.
• 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함.
• 보통 export 키워드를 붙여서 다른 파일에서 불러와 사용함.

리듀서 (reducer)

• 변화를 일으키는 함수.
• state,action 두가지의 매개변수를 받아옴.
• 현재 상태와 액션을 참고하여 새로운 state를 리턴함.
• 리덕스에서는 여러개의 리듀서를 만들고 합쳐서 루트 리듀서(Root Reducer)을 만들 수 있음.

참고
useReducer에서는 default:에 throw new Error('Unhandled Action')을 넣지만,
리덕스의 reducer에서는 state를 그대로 반환함.

스토어 (store)

• 한 어플리케이션당 하나의 스토어 존재.
• 현재 상태와 리듀서가 들어있음. + 내장함수 (dispatch, subscribe 등)

dispatch

• 스토어의 내장 함수.
• 액션을 발생시킴
• 액션을 인자로 전달하여 호출 -> 스토어는 리듀서 함수를 실행시킴.

subscribe

• 스토어의 내장 함수.
• 함수 형태의 값을 매개변수로 받아옴. (=listener 함수)
• 액션이 디스패치 될 때 마다 리스너함수가 호출됨.

• react-redux의 connect / useSelector(Hook)으로 구독함.

---

리덕스 사용하기

1. createStore (redux)
   = 스토어를 만들어주는 함수.

2. initialState 정의
   = state의 초기값 설정.

3. 액션 타입 정의 (대문자로 작성)
   = 모듈명/이름 형식으로 적어주면 중복 방지 가능.

4. 액션 생성함수 정의 (액션객체 return)

-> export 해줘서 외부에서 사용 가능하도록

5. reducer 함수 생성

• 반드시 불변성 지키기. (spread 또는 immer 라이브러리)

6. 스토어 생성

   const store = createStore(rootReducer);

• store 안에 state 가져오려면?

  const state = store.getState();

• 보통은 listener 함수 내부에서 가져옴.
  (state가 바뀔 때 마다 호출되기 때문)

액션이 디스패치 되면 -> reducer에 의해 상태가 바뀜 -> listener함수 실행 -> store.getState()

7. 구독 해제시

• store.unsubscribe()

8. 액션 디스패치

• store.dispatch(increase());

• action 생성 함수를 호출하여 인자로 넣음. (리턴값이 액션 객체임)

---

리덕스 모듈 생성

• 액션 타입 / 생성함수 / reducer 이 모두 들어있는 js파일.

• Duck 패턴.

1. 액션 타입 생성

   const SET_DIFF = 'counter/SET_DIFF';

   위와 같이 액션 이름 앞에 접두사로 모듈명을 적어줘야 함. (중복 방지)

2. 액션 생성함수 정의

   export const setDiff = diff => ({ type: SET_DIFF, diff });

3. initialState 선언

   const initialState = {
   diff: 1
   }

4. reducer 함수 정의

   export default function counter (state = initialState, action) {
   switch (action.type) {
    case SET_DIFF:
      return {
        ...state,
        diff: action.diff
      };
     ...
   }
   }

---

루트 리듀서 생성

• 한 프로젝트에는 하나의 store만 존재.
• createStore(rootReducer)로 하나의 리듀서만 들어가야 함.

리듀서를 합치는 함수는 combineReducers()를 사용.
-> redux 라이브러리 유틸 함수임.

리덕스 스토어 생성

• src/index.js

  const store = createStore(rootReducer);

Provider 컴포넌트

• react-redux 라이브러리를 사용해야 함.
• Provider 컴포넌트 import.

<Provider store={store}>
    <App />
</Provider>

-> Provider 컴포넌트의 props로 store을 전달해주면 됨.

---

컨테이너 생성

프레젠테이셔널 컴포넌트

• src/components 디렉터리에 생성.
• UI 선언에 집중.
• 필요 값(data)이나 함수는 props로 받아와서 사용하는 형태.

컨테이너 컴포넌트

• src/containers 디렉터리에 생성.
• 액션을 디스패치 / 리덕스 스토어의 state 조회 등.
• 다른 프레젠테이셔널 컴포넌트들을 불러와서 사용함. (import)

useSelector와 useDispatch함수 이용. (=Hooks)

• useSelector : 리덕스 스토어의 상태를 조회.
• useDispatch : 리덕스 스토어의 dispatch를 함수에서 사용할 수 있게 해줌.

cf- connect() 함수의 인자로 들어갔던 mapStateToProps, mapDispatchToProps의 역할을 각각
useSelector과 useDispatch가 하는 셈이다.

1) useSelector

const { number, diff } = useSelector(state => ({
    number: state.counter.number,
    diff: state.counter.diff
}));

2) useDispatch

const dispatch = useDispatch();

const onIncrease = () => dispatch(increase());

container 컴포넌트

return 에
Counter 컴포넌트의 props로 number, diff 그리고 onIncrease, onDecrease, onSetDiff를 넣어줌.
(액션을 dispatch하는 함수. 위에서 useDispatch로 받아온 dispatch(액션객체생성함수()) 형태)

---

참고 - useSelector 최적화시
두번째 인자로 react-redux의 shwallowEqual 함수를 전달해줌.