redux-toolkit 리팩토링 2 - createReducer

간단한 To-Do를 구현하면서 리덕스 공부를 해보았고,
이 포스트에서도 역시 To Do를 간단하게 완성한 후 redex에서 제공하는 tookit을 적용해 코드를 더욱 더 간결하게 리팩토링을 해보도록 하겠다.

지난 createAction 포스트에서 작성했던 동일한 서론으로 시작해보겠다.

why toolkit?

Redux를 사용하다보면 action creator 혹은 Boilerplate Code와 같이 반복되는 코드를 작성하는 등, 코드가 길어지는 경우가 많다. 이에 많은 개발자분들이 불편함을 느끼게 되었고, 그로 인해 Redux-toolkit이 탄생하게 되었다.

redux-toolkit 이란?
보다 효율적인 코드작성을 위한 package라고 보면 된다.
더 적은 양의 코드로 toolkit 적용 전의 코드와 같은 기능을 하도록 도와주는 것으로 보자.

[종류]
1. createAction
2. createReducer
3. configureStore
4. createSlice
(클릭하시면 해당 포스트로 이동합니다.)

이 포스트에서는 2. createReducer의 내용을 다루도록 하겠다.

설치

  yarn add @reduxjs/toolkit

createReducer

reducer란
기본 state를 action을 통해 새로운 state로 변형시키고, 그 값을 store에 전달한다.

기본 Redux의 reducer 함수가 어떻게 toolkit으로 재탄생이 되는지 아래에서 살펴보겠다.
createAction에서 리팩토링한 코드에 연장선이니 해당 포스트를 참고바랍니다.

createReducer 적용 전

const reducer = (state = [], action) => {
  switch (action.type) {
    case addToDo.type: // string
      return [{ text: action.payload, id: Date.now() }, ...state];
    case deleteToDo.type:
      console.log(action)
      return state.filter(toDo => toDo.id !== action.payload);
    default:
      return state;
  }
};

createReducer 적용 후

1. state를 mutate하기 쉽게 만들어준다. (기존 reducers는 mutate를 하지 못했다.새로운 state를 만들어야 했다.) 즉, 배열에 push를 하여 기존 배열의 값을 변형시킬 수 있게 해준다.

2. state의 mutate 유무에 따른 return 여부

   • mutate를 했다면 return X
   • mutate를 하지 않았다면 return O

3. 더이상 switch가 필요하지않으나 위의 reducer함수와 정확하게 동일한 기능을 한다.

4. createReducer(intial_state, 타입에 따른 action 실행 조건을 담은 객체)

const reducer = createReducer([], {
  // action이 addToDo일 때 파라미터에 state와 action을 넘기고, {}안에서 무엇인가를 하게 할 것임. 기존 reducer와 같이 "type이 무엇일 때 어떤걸 한다" 와 동일
  [addToDo]: (state, action) => {  // 리턴 X : redux의 reducer에서 return을 하려면 반드시 새로운 state를 return해야한다. 따라서 내가 변형한 값을 리턴하지 말아야하는 주의가 필요하다. 
    state.push({ text: action.payload, id: Date.now() });  // 그렇다면 어떻게 여기선 mutate가 가능한것일까? redux-toolkit이 immer 안에서 작동해서 그렇다는데, 여기서 우리가 변형을 했다하여도, 여기서 toolkit과 immer가 이 정보만 가져가는 것일 뿐이고 그 후에 위에서 내가 기본 reducer에서 새로운 state를 만들었던 것처럼 toolkit과 immer가 대신 해준다. 결국 여기서 내가 push로 state를 변형시키지만 결국 새로운 state가 되는 것.
  },                                                       // 따라서, mutate를 했다면 절대 return 하지 말것. 하면 오류남.
  [deleteToDo]: (state, action) =>  // 리턴 O 
    state.filter(toDo => toDo.id !== action.payload)
})

정리

여기서 중요한 포인트는 아래와 같을 것 같다.
1. switch 구문을 사용하지 않아도 된다.
2. Redux의 reducer에서 state를 변형시키면 안된다!!

• state를 변형시키는 코드를 작성 시 return 금지!
  (toolkit & immer가 새로운 state를 리턴하게 해줄 것이다. 더 상세한 이유는 아직 잘 모르겠다.)
• state를 변형시키지 않았다면 바로 return 가능!