createSlice(redux-toolkit)를 이용하여 간단하게 action과 reducer 사용하기

리덕스에서 가장 높은 진입 장벽은 redux의 흐름에 관한 이해와, action과 reducer 생성이라고 생각한다.

전 블로깅에서 언급했듯이 보일러플레이트 코드를 너무 많이 사용해야된다.
액션 타입, 액션 생성함수, 리듀서 이렇게 3가지 종류로 코드를 준비해야 한다.

아래 예시코드는 veloprt.log 에서 가져왔다

export const OPEN = 'msgbox/OPEN';
export const CLOSE = 'msgbox/CLOSE';

export const open = (message) => ({ type: OPEN, message });

const initialState = {
  open: false,
  message: '',
};

export default msgbox(state = initialState, action) {
  switch (action.type) {
	case OPEN:
      return { ...state, open: true, message: action.message };
    case CLOSE:
      return { ...state, open: false };
    default:
      return state;
  }
}

또한 세부적인 업데이트가 늘어날 수록 불변성을 지키기 힘들어 진다.

물론, redux-actions와 immer 를 사용해서 간소화 할 수 있지만, redux-actions와 immer에 대한 이해가 선행 되어야 한다.

import { createActions, handleActions } from 'redux-actions';
import produce from 'immer';

이해를 마치고 나서 작성을 해도 코드가 그렇게 짧아지지 않는다는 것을 알게된다.

하지만 redux-toolkit의 createSlice 는 코드를 무척이나 간소해 주고, Ducks 패턴을 사용할 수 있게 해준다.(Immer가 내장되어 있어 불변성을 유지하기 위해서 추가적으로 코드를 작성하지 않아도 된다)

Ducks 패턴의 장점은 구조중심이 아니라 기능중심으로 파일을 나눠서, 단일기능을 작성할때나 기능을 수정할 때 하나의 파일만 다루면 되므로 직관적인 코드 작성이 가능하다.

Ducks 패턴을 사용하면 코드가 길어져서 파일을 위아래로 움직이면서 찾아봐야 하는데 createSlice는 이 코드 길이를 줄임으로서 가독성도 향상된다.

redux-toolkit을 사용해서 다시 작성한 velopert 코드

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

const initialState = {
    open: false,
    message: '',
};

const msgbox = createSlice({
  name: 'msgbox',
  initialState,
  reducers: {
    open(state, action) {
      state.open = true;
      state.message = action.payload
    },
    close(state) {
      state.open = false;
    }
  }
});

export const { open, close } = msgbox.actions;
export default msgbox.reducer;

// reducer: msgbox.reducer
// action creators: msgbox.actions.open, msgbox.actions.close
// actionType: 
// - msgbox.actions.open.type: 'msgbox/open'
// - msgbox.actions.close.type: 'msgbox/close'

---

참고자료

veloprt.log - Redux 어떻게 써야 잘 썼다고 소문이 날까
dolarge.log - Ducks 패턴