[Redux Toolkit] createReducer

본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다.

 

createReducer

---

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

---

 

createReducer는 말 그대로 reducer를 만들어주는 함수이고, reducer를 작성하는데 코드를 줄여주는 역할을 한다.

지금까지 우리는 reducer 함수를 작성할 때 switch 문을 작성해서 처리해왔으나 이제는 그럴 필요가 없다.

 

const reducer = createReducer([], {
  [addToDo]: (state, action) => {
    state.push({ text: action.payload, id: Date.now() });
  },
  [deleteToDo]: (state, action) =>
    state.filter((toDo) => toDo.id !== action.payload),
});

 

createReducer 함수는 createReducer(initialValue, function) 꼴로 작성할 수 있다.

function부를 작성할 때는 [함수 이름]: (state, action) => {code} 꼴로 작성한다.

 

중요한 점은 createReducer에서는 state를 mutate 할 수 있다는 점이다.

NEVER MUTATE STATE에서 Redux의 3원칙 중 3번째 원칙으로 state를 mutate하면 안된다고 배웠다.

그러나 이젠 Redux toolkit을 도입하면서 state를 mutate할 수 있게 된 것이다.

 

그래서 createReducer를 사용할 땐 State를 Update하는 방법으로 2가지 방법 중 하나를 선택할 수 있게 되었다.

 

• NEW State 만들어서 return
• 기존 State를 Mutate

위의 코드를 보면 push 함수는 새로운 state를 만들지 않는다. push 함수는 기존 state를 수정(mutate)할 뿐이다.

반대로 filter 함수의 경우는 새로운 배열을 만들어서 return하는 함수이다.

 

이 두 가지 방법 중 편한 방법으로 사용하면 된다.