2월 18일 여정 41일차이다.

오늘은 Redux의 리듀서에 대해 코드를 보면서 더 자세히 알아보려한다.

오늘의 Today I Learned

기본적으로 react-redux랑 redux-toolkit은 서로 차이점을 가지고 있다.
순수 리덕스와 리덕스 툴킷의 가장 대표적인 차이점은 리듀서라는 곳에서 시작된다.
리듀서는 입력값이 dispatch에서 액션이라는 것을 통해 전해졌을 때, 전해진 값이 수정되는 곳이다.
그럼 바로 코드를 보자.

const reducer = (state: ToDo[] = [], action: ToDoAction) => {
  switch (action.type) {
    case ADD:
      return [
        { text: action.text, body: action.body, id: Date.now(), isDon: false },
        ...state,
      ];
    case DELETE:
      return state.filter((toDo) => toDo.id !== action.id);
    case MOVEDON:
      return state.map((toDo) => {
        if (toDo.id === action.id) {
          return { ...toDo, isDon: action.isDon };
        }
        return toDo;
      });
    default:
      return state;
  }
};

위는 리엑트 리덕스의 리듀서이다. initialState는 아무것도 없는 배열로 시작한다. 그러나 리액트 리덕스에서 중요한것은 불변성을 지키는 것이다.

case ADD:
      return [
        { text: action.text, body: action.body, id: Date.now(), isDon: false },
        ...state,
      ];

이 부분을 잘 보면 이전 값인 state를 놓는 것을 볼 수 있다.

case MOVEDON:
      return state.map((toDo) => {
        if (toDo.id === action.id) {
          return { ...toDo, isDon: action.isDon };
        }
        return toDo;
      });

이 부분 역시나 이전 값인 state를 스프레드 문법을 사용하여 넣어준 것을 볼 수 있다.

 case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };

위의 코드 역시 배열 안에 이전의 state 값을 넣어준 것을 볼 수 있다.

반면에 툴킷을 보자.

reducers: {
    add: (state, action: PayloadAction<string>) => {
      state.push({ text: action.payload, id: Date.now() });
    },

리액트 리덕스라면 하지 못 할 push를 사용하고 있다. 즉 불변성을 전혀 지키고 있지 않다. 지키지 않았지만 리덕스 툴킷은 아무 문제없이 잘 작동한다.

이처럼 리액트 리덕스는 initialState가 배열일 경우, 기존의 배열은 수정하지 않고 새로운 배열을 만들어 교체하는 방식이라는 것을 알 수 있다. 즉 불변성을 지켜야 한다. 만약 이것을 지키지 않으면 이전의 값은 지워지고 새로운 값이 그 자리를 대체 할 것이다. 혹은 리액트의 리랜더링이 일어나지 않을 것이다. 반대로 리덕스 툴킷은 push를 사용하여도 이전의 값이 지워지지 않고 원하는 방식대로 작동 될 것이다.

마지막으로

리덕스에 대한 더 깊은 이해가 필요할 것 같다.