리덕스toolkit

리덕스 toolkit 설치 방법

yarn add react-redux @reduxjs/toolkit

리덕스 toolkit 사용 방법

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

const initialState = {
  number: 0,
};

export 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 const { addNumber, minusNumber } = counterSlice.actions;
export default counterSlice.reducer;

슬라이스만 자세히 보겠습니다. 슬라이스는 createSlice 라는 API를 통해 만들 수 있습니다. 그리고 그 인자로 설정정보를 객체로 받는데, 그 안에 우리가 필수로 작성해줘야 하는 값은 name, initialState, reducer가 있습니다.

const counterSlice = createSlice({
	name: '', // 이 모듈의 이름
	initialState : {}, // 이 모듈의 초기상태 값
	reducers : {}, // 이 모듈의 Reducer 로직
})

신기한 것은 위의 counterSlice 리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서도 동시에 Action Creator가 된다는 점입니다. 그리고 Action Value 까지 함수의 이름을 따서 자동으로 만들어집니다. 그래서 우리는 Reducer만 만들어주면 됩니다.

// 리듀서 counterSlice
export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
		// 리듀서 안에 만든 함수 자체가 리듀서 로직이자, Action creator가 된다 ✨
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

그리고 우리가 일반 리덕스에서 export를 통해서 각각의 Action Creator를 내보내주었던 것을 아래 코드를 작성하면 똑같이 내보낼 수 있습니다. 그래서 리듀서에 로직을 추가할 때마다 함수를 추가해서 내보내주면 됩니다.

export const { addNumber, minusNumber } = counterSlice.actions;
export default counterSlice.reducer;

configStore.js 내용

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

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

export default store;

index.js

그리고 이렇게 생성한 store를 export default 해서 최상위의 index.js Provider에 주입해주는 것은 전혀 바뀐게 없습니다.

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./redux/config/configStore";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

---

---

정리

• slice를 이용하면, Reducer, Action Value, Action Creator를 한번에 구현할 수 있다.
• 툴킷을 사용하면, 별도의 설정없이 devtools를 사용할 수 있다.
  • 내장된 주요 패키지 : thunk, devtools, immer 등.