[Redux-Toolkit] 리덕스 툴킷 기본 이해하기

Redux-Toolkit은 기존의 Redux를 보다 편리하게 사용하기 위해 제공되는 Redux 개발 도구이다.

기존 리덕스의 문제점은 아래와 같다.

• 스토어 환경이 복잡하다.
• 리덕스 사용시 많은 패키지를 추가해야한다.
• 리덕스 보일러플레이트코드를 너무 많이 요구한다

이러한 이슈를 해결 하기 위해 툴킷이 등장했다.

 

Redux-Toolkit설치

# NPM
npm install @reduxjs/toolkit

#Yarn
yarn add @reduxjs/toolkit

React와 Redux로 새 앱을 만들기 위해 추천 방법은 Create React App을 위한 공식 Redux + JS템플릿을 사용하는 것이다.

npx create-react-app <프로젝트명> --template redux

Redux + TS템플릿

npx create-react-app <프로젝트명> --template redux-typescript

 

1. configureStore()

가장 먼저 스토어를 구상하는 함수 configureStore를 만들어 준다. 기존 리덕스의 createStore를 추상화한 것이다.

공유하는 state를 등록한다.

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

let store = configureStore({
  reducer: {
    countSlice: countSlice.reducer,
  },
});

export default store;

2. Provider

최상위 컴포넌트에 Provider를 감싸고 store속성을 넣어준다.

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

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

reportWebVitals();

3. createSlice()

Slice 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 Slice를 만들어준다.

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

const initialState = 0;

export const countSlice = createSlice({
  name: "countSlice",
  initialState,
  reducers: {
    increase(state, action) {
      return (state += action.payload);
    },
    decrease(state, action) {
      return (state -= 1);
    },
  },
});

export const { increase, decrease } = countSlice.actions;

 

countSlice의 이름과 초기값 0, reducers객체안에는 initialState를 변경할 수 있는 변경 함수들이 포함되어있다.

인자로는 기존값인 state, 매개변수를 통해 값을 받을수 있는 action이 있다.

4. useSelecor, useDispath

useSelector는 해당 컴포넌트에 configureStore에 등록되어있는 reducer를 가져와 사용할 수 있다.

useDispath는 dispath를 통해 Slice안에 reducers의 함수를 호출할 수 있다.

import { useDispatch, useSelector } from "react-redux";
import { decrease, increase } from "./countSlice";

function App() {
  const selector = useSelector((state) => state.countSlice);
  const dispatch = useDispatch();
  return (
    <>
      <h1>Count: {selector}</h1>
      <button
        onClick={() => {
          dispatch(increase(100));
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(decrease());
        }}
      >
        -
      </button>
    </>
  );
}

export default App;

리덕스 툴킷의 기본 활용은 기존의 복잡한 리덕스보다 간편하고 사용하기에도 편리하다.

기본 사용법만 잘 알아도 리액트 사용시 복잡한 상태 관리가 잘 이루어 질것 같다.