redux-toolkit

redux의 휴먼이슈 해결을 위해 덕스 패턴을 사용했다면 좀 더 편이성을 느낄 수 있는 redux-toolkit!

아직 코린이라 store와 reducer만을 사용하여 redux의 기능만 사용했다면 이걸 굳이? 라고 느낄 수 있는 redux-toolkit..

 

지난 주 redux로 만든 것을 redux-toolkit으로 같은 로직으로 만들었다.

store부터 보면 store에서는 다른 부분보다 configureStore의 역할이 눈에 띄는데, 이 친구는 redux에서 createStore와 combinedReducers의 기능을 합쳐서 태어난 놈이다. 결론 적으로는 하나로 두개의 기능을 하도록 만든 것!

import { todoReducertool } from "../module/todoReducertool";
const { configureStore } = require("@reduxjs/toolkit");

export const todoStore = configureStore({  reducer: todoReducertool,});

이어서 reducer함수를 보자.

import { createSlice } from "@reduxjs/toolkit";

import { getList, getLocal, setLocal } from "../util/todoutil";

const initial = {

  todo: getLocal() ?? [],

  done: getLocal() ? getLocal()?.filter((el) => el.isDone === true) ?? [] : [],

  notDone: getLocal()

    ? getLocal()?.filter((el) => el.isDone === false) ?? []

    : [],

  select: {},

};

export const todoReducertool = createSlice({

  name: "todo",

  initialState: initial,

  reducers: {

    addList: (state, action) => {

      const todo = { ...action.payload };

      setLocal([...state.todo, todo]);

      return {

        ...state,

        todo: [...state.todo, todo],

        done: getList([...state.todo, todo]).done,

        notDone: getList([...state.todo, todo]).notDone,

      };

    },

    doneList: (state, action) => {

      const doneDo = state.todo.map((el) =>

        el.id === action.payload ? { ...el, isDone: !el.isDone } : el

      );

      setLocal(doneDo);

      return {

        ...state,

        todo: doneDo,

        done: getList(doneDo).done,

        notDone: getList(doneDo).notDone,

      };

    },

    deleteList: (state, action) => {

      const deleteDo = state.todo.filter((el) => el.id !== action.payload);

      setLocal(deleteDo);

      return {

        ...state,

        todo: deleteDo,

        done: getList(deleteDo).done,

        notDone: getList(deleteDo).notDone,

      };

    },

    detailList: (state, action) => {

      const detailDo = state.todo.filter((el) => el.id === action.payload);

      return { ...state, select: { ...detailDo } };

    },

  },

});

export const { addList, doneList, deleteList, detailList } =

  todoReducertool.actions;

export default todoReducertool.reducer;

일단 눈에 띄는 것이 기존에 휴먼이슈로 인해 만들었어야 했던 부분들 action 함수, action creater들이 사라진 것이 딱 눈에 보인다. 코드가 확실히 간결해진 것을 느낄 수 있다. 간결이라는 것은 가독성이 확실히 좋아 진 것. 
redux에서는 위아래로 왔다갔다하면서 이놈이 저놈인가 했다면 이제는 각자 reducer 함수의 이너함수로 묶어줌으로써 확실히 기능별 분리가 된 것을 볼 수 있다.
★ 작업하면서 가장 좋았던 부분은 스코프가 각각 분리되어 있어서 constant 에러를 안만나도 되었다는 것. 진짜 이름 각각 지어주는 것도 짜증났는데 그런 작업이 필요없어졌다. 각자 함수 스코프로 나누어졌기 때문에 이제는 각 기능별 확실히 스코프까지 분리된 것이 가장 좋았다.