[Redux Toolkit] Redux를 좀 더 간편하게, Redux Toolkit (2) - createReducer

이전 글에 이어서 이번에는 createReducer에 대해 작성하겠다. 이전 글에서 다뤘던 createAction은 Redux의 action을 간편하게 만들 수 있는 것이었다면, createReducer도 마찬가지로 reducer를 간편하게 만들 수 있는 방법이다. 

---

createReducer

TodoList 코드를 기준으로 보면 기존의 reducer를 생성하는 방법은 아래와 같다.

const reducer = (state = [], action) => {
  switch (action.type) {
    case addTodo.type:
      return [...state, { text: action.payload, id: Date.now() }]
    case deleteTodo.type:
      return state.filter((e) => e.id !== action.payload)
    default:
      return state
  }
}

switch-case문을 사용하여 action의 type 별로 case를 나누어서 구현했다. 그러나 createReducer는 createAction을 사용하여 조금 더 간편하게 reducer 함수를 구현할 수 있다.

const addTodo = createAction('ADD')
const deleteTodo = createAction('DELETE')

const reducer = createReducer([], {
  //불변성 유지를 위해 immer를 도입했기 때문에 새로운 상태 객체를 리턴할 필요 없이 state를 mutate 가능
  [addTodo]: (state, action) => {
    state.push({ text: action.payload, id: Date.now() })
  },
  [deleteTodo]: (state, action) => state.filter((e) => e.id !== action.payload),
})

createReducer의 첫 번째 인자는 initialState이다. 처음 배열은 비어있으므로 위와 같이 썼다. 또한 switch-case문을 사용하지 않고, 생성한 action의 이름을 바로 불러서 객체 형식으로 작성한다. 여기서 중요하게 봐야할 것이 있다. 기존의 reducer는 불변성 유지를 위해서 state를 mutate할 수 없다고 설명했었다. 기억이 안 난다면 아래의 글을 참고하자.

[React Redux] React에서 Redux를 사용해보자(1)

그러나 createReducer에서는 다르다. 불변성 유지를 위해서 immer라는 라이브러리를 도입했기 때문에 새로운 state를 반환할 필요 없이 다이렉트로 state 값 변경이 가능하다. 따라서 배열의 push() 함수를 사용할 수 있다. 단, 이때는 값을 반환하는 것이 아니므로 {}로 감싸야 한다. 혹은 deleteTodo처럼 기존의 방식대로 새로운 state를 반환할 수도 있다.