리덕스 툴킷 (React)

리덕스 툴킷은 리덕스를 좀 더 짧은 코드와 사용하기 쉽게 개량한 버전으로
줄여서 RTK 라고도 합니다.

리덕스와 구조나 전체적인 흐름은 똑같고 컴포넌트에서 useSelector를 통해
사용하는 것 모두 같습니다. 더하기, 빼기의 state를 렌더링하는 예제들 통해
리덕스와 리덕스 툴킷이 어떤 식으로 다른지 공부해봅시다.

일반 리덕스의 action creator, reducer 함수

// 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;
  }
};

// 리덕스 툴킷: action creator, reducer가 하나의 메서드에서 수행

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;

configStore 비교

// 일반 리덕스 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;
// src/redux/modules/config/configStore.js

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

// 리덕스 툴킷
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

const store = configureStore({
  reducer: { counter: counter, todos: todos }, // 모듈이 여러개인 경우
});

export default store;

더 간편해진 리덕스 툴킷을 활용해 다양한 개발을 해보자!