Redux toolkit

Redux toolkit란?

효율적인 Redux 개발을 위한 저희의 견해를 반영한, 이것만으로도 작동하는 도구 모음입니다.
Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌습니다.

이 안에는 저장소 준비, 리듀서 정의, 불변 업데이트 로직, 액션 생산자나 액션 타입을 직접 작성하지 않고도 전체 상태 "조각"을 만들어내는 기능까지 대부분의 Redux 사용 방법에 해당하는 유틸리티 함수들이 들어 있습니다. 거기다가 비동기 로직을 위한 Redux Thunk와 셀렉터 작성을 위한 Reselect 등의 널리 사용되는 애드온을 포함하고 있어 이들을 제대로 사용할 수 있게 해줍니다.

그럼 Redux toolkit왜 써야하는가?

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

ex)

// counterSlice.js의 Slice 구조

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

기존의 Action Value, Action Creator, reducer를 작성하지 않아도

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

이 코드로 인해 3가지를 각각 만들 필요가 없어 졌다.

configStore

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;

combineReducers와 createStore 두가지 메소드를 이용하고 있는것을 확인할수 있었다.

combineReducers를 통해서 모튤이 여러개 일때 rootReducer로 이동되면서 합처주고

그리고 그 루투를 createStore안에 인자로 넣어지면서 store를 생산하는 두가지 과정을

거치고있다.

configStore 리덕스 툴킷

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

configureStore 라는 메소드를 하나에 모듈로 합치는 것과 store생성을 하는것을

한번에 하고있다. 그래서 모듈이 추가가 되면 configureStore안에 객체 안에

모듈을 추가 작성해주면 된다.