Redux-toolkit

리덕스에서 사용되는 duck패턴 요소가 오히려 전체적인 코드량을 증가시킨다는 이슈에서 시작되었으며, 이를 해결하기 위해 리덕스팀이 만든 것이 바로 리덕스 툴킷이다.

리덕스 툴킷의 경우 duck패턴에 비해 코드량은 줄어들었으며 사용은 오히려 더 복잡하지 않게 사용을 할 수 있다.

• 코드량을 줄이기 위해 새로운 API가 추가
• ducks패턴을 자동화

Redux 와 Redux-toolkit 비교

Redux

리덕스 duck패턴의 경우 action type정의, action함수 생성, initialState정의, reuducer함수 생성으로 이뤄집니다.

또한 state의 경우 return { ...state, number: state.number + action.payload.diff }과 같이 기존 state를 나열 한 후 새로운 액션값을 정의합니다.

counter.js

//액션타입 정의
const INC_COUNT = "counter/INC_COUNT";
const DEC_COUNT = "counter/DEC_COUNT";

//액션 생성함수
export function incCount(diff) {
  return {
    type: INC_COUNT,
    payload: { diff },
  };
}

export function decCount(diff) {
  return {
    type: DEC_COUNT,
    payload: { diff },
  };
}

const initailState = { number: 0 };

export default function counter(state = initailState, action) {
  switch (action.type) {
    case INC_COUNT:
      return {
        ...state,
        number: state.number + action.payload.diff,
      };
    case DEC_COUNT:
      return {
        ...state,
        number: state.number - action.payload.diff,
      };
    default:
      return state;
  }

index.js

import { legacy_createStore as createStore } from "redux";
import { combineReducers } from 'redux'
import counter from "./counter";

const rootReducer =  combineReducers({
  counter,
})

const store = createStore(rootReducer);

export default store;

Redux-toolkit

리덕스 툴킷의 경우 createSlice를 이용해 별도로 action타입, action함수, reducer함수를 만들 필요 없이 하나로 만들어 관리를 할 수 있습니다. 더해서, createAction, create

또한 리덕스 툴킷의 경우 내부적인 플러그인의 도움으로 새로운 state를 반환하지 않고 바로 수정할 수 있다는 큰 장점이 있습니다.

createSlice

CreateReducer.js

mport { createSlice } from '@reduxjs/toolkit'

const initialState = { value: 0 }

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

//컴포넌트에서 액션을 사용할 수 있도록 export 내보냅니다.
export const { increment, decrement, incrementByAmount } = counterSlice.actions
//reducer의 경우 configStore에 등록하기 위해 export default합니다.
export default counterSlice.reducer

configureStore

counterSlice.js

import { configureStore } from '@reduxjs/toolkit'

import counter from './reducers/counter'
import todos from './reducers/todos

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

export default store