[Redux] Redux-Toolkit

임홍원·2023년 11월 28일

redux redux-toolkit

Redux

목록 보기

3/4

Redux Toolkit

Redux Toolkit은 효율적인 Redux 개발을 위한 저희(Redux team)의 견해를 반영한, 이것만으로도 작동하는 도구 모음.

설치

npm install @reduxjs/toolkit

Redux Toolkit의 목적

Redux 코어 라이브러리는 의도적으로 특정한 방향을 배제하고 만들어졌다. 이를 통해 저장소 준비나 상태 보관, 리듀서 작성과 같은 모든 것들을 여러분이 결정하게 했다.

이렇게 융통성을 주는 것은 어떤 경우에는 좋지만, 항상 필요한 것은 아니다. 쓸만한 기본 동작을 가져다가 바로 쓸 수 있는 간단한 방법이 있으면 좋을 때도 있다. 아니면 커다란 애플리케이션을 만들다 보니 비슷한 코드를 계속 작성하게 되었고, 직접 쓰는 양을 줄이고 싶을 수도 있다.

Redux Toolkit은 Redux에 대해 흔히 우려하는 세 가지를 해결하기 위해 만들어졌다:

"저장소를 설정하는 것이 너무 복잡하다"
"쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다"
"보일러플레이트 코드를 너무 많이 필요로 한다"

Redux와 RTK 코드 비교

기존 Redux

// 일반 리덕스 예시 코드

// 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 reducer
export default counter;

RTK

// 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와 같이 Action values와 Action creators를 생성 할 필요가 없다.

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

우선 @reduxjs/toolkit 에서 createSlice 를 import 해준다.
createSlice 는 조각 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 조각을 자동으로 만들어준다.

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;
    },
  },
});

createSlice 로 counterSlice를 만들어 주었다.
createSlice 는 name, initialState, reducers: {} 가 필요하다.

export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;

기존 Redux store

// 일반 리덕스 combineReducers 예시 코드

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

const rootReducer = combineReducers({
  counter,
});
const store = createStore(rootReducer);
export default store;

RTK store


import { configureStore } from "@reduxjs/toolkit";
/**
 * import 해온 것은 slice.reducer
 */
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

/**
 * 모듈(Slice)이 여러개인 경우
 * 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가
 *
 * 아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
 * 이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것 입니다.
 */
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;