[React] Redux-toolkit 입문하기

redux로 구성되어 있던 카운터 프로젝트를 redux-toolkit으로 바꿔보면서 무엇이 다른지 알아보겠습니다.

🔍카운터 코드로 비교하기

// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload,
  };
};

export const minusNumber = (payload) => {
  return {
    type: MINUS_NUMBER,
    payload,
  };
};

// Initial State
const initialState = {
  number: 0,
};

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

export default counter;

기존의 redux만 사용했을 때의 action, reducer 코드입니다.

 

redux의 구조적인 단점이 있는데,

 

1. action 관리가 번거롭다.

action과 그에 맞는 action creator를 일일이 하나씩 선언해주고 export해야합니다.

 

2. action, reducer의 관리가 쉽지 않다.

action의 value와 그에 맞는 reducer, action creator를 생성해주어야 합니다.

action creator 조차도 관리가 어려워서 생겨난 것들입니다.

각자 다 따로 존재하기 때문에 불편한 점이 상당히 많습니다.

 

// src/redux/modules/counterSlice.js

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

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export
export const { addNumber, minusNumber } = counterSlice.actions;

// reducer 는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;

redux-toolkit의 코드입니다.

createSlice의 객체 형식으로 관리되면서 위에서 나열했던 단점들이 모두 해결이 됩니다.

 

(여담이지만 컴포넌트의 재사용성을 높이기 위해서 합성 컴포넌트를 만드는 방식과 비슷해보인다.)

합성 컴포넌트로 재사용성 극대화하기

 

store를 관리하는 코드도 함께 살펴봅시다.

import { createStore } from 'redux';
import { combineReducers } from 'redux';
import counter from '../modules/counter';

const rootReducer = combineReducers({
  counter: counter,
})

const store = createStore(rootReducer);

export default store;

redux를 사용했을 때는 여러개의 reducer들을 combineReducers로 합쳐준 다음

createStore해주는 작업이 필요합니다.

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit";
import counter from "../modules/counterSlice";

const store = configureStore({
  reducer: { counter: counter },
});

export default store;

redux-toolkit을 사용하면 configureStore()안에 객체형태로 한번에 관리해주면 됩니다.