[간략글] Redux-toolkit 어느 면이 효율적이고 비효율적인가?

아하팀에서는 상태관리 라이브러리로 Redux-toolkit(이하 RTK)를 사용합니다.

왜 RTK를 선택하게 되었을까요?

아래는 기존 Redux에서 Action을 만드는 코드 조각입니다.

export enum TodoActionType {
  tapAdd,
  tapDelete,
  tapUpdate,
  modalOpen,
  modalClose,
}

export type TodoPayload = {
  todo: Todo;
  selectedIndex: number;
};

export type TodoAction = {
  type: TodoActionType;
  payload: TodoPayload;
};

여기서 Redux의 첫번째 단점이 부각됩니다.
바로 상용구의 사용이 잦다라는 점입니다.
이렇게 타입을 처리하고 새로이 액션을 만들어주어야 하기 때문에 보일러플레이트가 방대해질 수 밖에 없습니다.

다만 RTK에서는 CreateSlice를 통해 하나의 함수를 작성하고 이를 Action으로 추출하는 방식으로 Action을 만들 수 있습니다.

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

타입을 자동으로 추론해주기 때문에 나쁘지 않은 것 같습니다.
기존의 Redux의 장점으로 순수함수 사용 등이 있지만 이러한 장점이 결국 타입 추론의 문제점이 될수도 있다는 것에 주목할 수 있었습니다.