리덕스 툴킷 (RTK) 기초 정리

승환입니다·2022년 7월 23일

React rtk

안녕하세요 ! 오늘은 Redux Toolkit을 배워보겠습니다! ╰(°▽°)╯
정말 기초만 정리를 할꺼여서 정보를 깊게 얻고 싶으신분들은 재미로만 봐주세요!

리덕스란?

전역상태관리 라이브러리

출처:https://www.slideshare.net/binhqdgmail/006-react-redux-framework

리덕스를 쓰는이유?

state와 props로만으로 상태관리를 할떄 큰 프로젝트일수록 예상치 못한 오류와 props drilling 이 발생하는데 그걸 해결하기위해 전역상태관리 라이브러리인 리덕스를 쓰기 시작했습니다.

리덕스는 빠른 오류해결,코드의 가독성 향상,유지보수 향상, 상태 예측(dev tool)등 많은 이점을 가지고 있습니다.
하지만 문제점도 존재합니다.

리덕스의 문제점

기본 환경 설정이 매우 복잡합니다
사용하기 위해서는 많은 패키지들을 같이 다운받아야합니다
진입장벽이 높습니다.

리덕스 툴킷이란?

리덕스 툴킷이란 리덕스의 불편한 점을 보안하기 위해서 나온 개발도구입니다.

리덕스 툴킷 사용법

간단한 프로젝트가 가능한 필수적인 문법소개후 간단한 예제로 마치겠습니다!
리덕스 설치 : npm install @reduxjs/toolkit

createSlice

store에 저장할 작은 slice조각을 만들어 주는 api입니다.
문자열로 된 슬라이스 이름,초기값,상태 변화를 정의한 리듀서로 이루어져있습니다.

추가로 본래 리덕스에서 작성해야 했던 액션타입과 액션함수는
앞서 작성한 슬라이스 이름, 초기값을 바탕으로 createSlice api안에서 자동으로 생성해줍니다.

configureStore

작은 slice들을 하나의 store에 넣어주는 api입니다.
기본적으로 Redux미들웨어를 추가기능 , redux-thunk , redux devtool등이 내장되어 있습니다.
필수적으로 slice들의 reducer가 들어가야합니다.

예제

간단하게 리덕스 툴킷을 이용해서 버튼을 누르면 숫자가 +1 , -1만큼 카운터되는 예제를 만들어보겠습니다!

store.js 파일에 configureStore로 store을 만듭니다.
아직 slice를 만들지 않았으므로 recducer 객체에는 아무것도 넣지 않았습니다.

import { configureStore } from "@reduxjs/toolkit";
let store = configureStore({
  reducer: {},
});

export default store;

2.index.js에 store.js에서 만든 store를 가져와서 store를 받은 provider로 app태그를 감싸줍니다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { store } from "./duck/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

3.store과 app을 연결했으니 store안에 들어갈 slice를 만들어보겠습니다.
counterSlice.js파일안에서 createSlice로 slice를 만들고
store안에 들어갈 counterSlice.reducer와 dispatch할떄 쓰일
counterSlice.actions을 export해줍니다.

import { createSlice } from "@reduxjs/toolkit";
let counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    up: (state, actions) => {
      state.value = state.value + 1;
    },
    down: (state, actions) => {
      state.value = state.value - 1;
    },
    want: (state, actions) => {
      state.value = state.value + actions.payload;
    },
  },
});

export const { up, down, want } = counterSlice.actions;
export default counterSlice.reducer;

counterSlice.js에서 export 한 리듀서를 store.js에 넣어줍니다.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
let store = configureStore({
  reducer: { counter: counterReducer },
});

export default store;

리덕스 내장함수 useSelector을 가져와서 store에있는 slice를 조회하고
dispatch로 상태변화를 일으켜줍니다. dispatch의 상태변화는 위에서 export한 액션을 가져와서 함께 써줍니다.

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { down, up } from "./duck/counterSlice";

const App = () => {
  const dispatch = useDispatch();
  const count = useSelector((state) => {
    console.log(state);
    return state.counter.value;
  });
  return (
    <div>
      <h1>Count:{count}</h1>
      <button
        onClick={() => {
          dispatch(up());
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          dispatch(down());
        }}
      >
        -1
      </button>
    </div>
  );
};

export default App;