react-redux toolkit 리덕스 툴킷 첫 경험

요 며칠 리덕스의 사용으로 인해 혼자서 고군분투 하고 있었다.

대충 큰 그림도 그려지고 Todo-list, counter 증감과 같은 정도는 해낼 수 있을 것 같은데 이 정도 레벨에서 사용하자니 "무려" redux를 사용하기에 무척이나 아깝게 느껴졌다.

이를 더 충분히 활용하지 못하는 느낌이 들었다.

과거에 redux-toolkit에 대해서 잠깐 보긴 했지만 당장 이것을 아는 것보다 원래의 Redux를 잘 아는 것이 더 중요하다고 생각하여 패스한적이 있다.

그러나 어차피 글로벌한 state 관리를 해야한다면 그리고 무조건 Redux를 사용해야 한다면 가능한 간편한 방법으로 사용하는 편이 효율적일 것이다.

그렇게 redux-tookit을 다시 찾아보게 되었다.

---

toolkit에 관한 것은 유튜브와 공식문서를 찾아보았다.

우선 공식문서 첫 페이지인 "Getting Started"로 들어가보았다.

어떤 라이브러리던지 우선 설치를 하고 썼으므로 자연스럽게 설치하는 것을 먼저 찾아보아야 할 것이다.

나는 yarn을 사용하므로 아래의 키워드를 활용하여 설치하였다. (그 전에 redux, react-redux는 설치가 되어있는 상태이다.)

yarn add @reduxjs/roolkit

 

그리고 그 아래에 보면 What's Included 라고 하여 REdux Toolkit 안에 들어있는 다양한 API들을 확인 할 수 있었다.

처음부터 모든 것을 다 알려고 하기 보다는 몇개 되지 않아서 한번 쭉~ 읽어보았다.

그래도 Redux를 조금이나마 이해를 하고 읽어보니 configure라는 단어만 빼면 Store, Reducer, Action, Thunk, Selector 등 눈에 익숙한 것들이 보여서 대충 어떤 식으로 사용해야하는지 감이 왔다.

 

그 다음은 Youtube의 힘을 빌렸다.

숫자 증가, 감소, 원하는 만큼 증가 이렇게 세 가지를 해보려고 한다.

우선 toolkit 이라는 폴더를 만들고 그 안에 configureStore.js 라고 파일을 만들었다. (물론 그냥 store라고 해도 된다.)

그리고 그 안에 documentation에 있는 것을 그대로 복붙해서 붙였다.

 

[configureStore.js]

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

export default configureStore({
  reducer: {},
});

 

그리고 counter.js 라는 것을 만들었다.

여기서는 createSlice 라는 것을 사용하는데 이 부분이 기존 redux와 달랐다.

 

[counter.js]

 

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

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 0,
  },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
    incrementByAmount: (state, action) => {
      state.count += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

조금 편하게 생각하면 기존의 reducer 정도라고 생각해 볼수도 있을 것이다.

 

그리고 다시 configureStore.js로 가서 이 counter.js를 import 해주었다.

 

[ configureStore.js ]

 

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

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

 

기존 redux에서 나는 주로 index.js에서 Provider를 만들었으므로 이 경우에도 똑같이 index.js에서 만들었다.

[index.js]

 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

import store from "./redux/configureStore";
import { Provider } from "react-redux";

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

그리고 Counter.jsx 파일을 component 폴더 안에 만들어주었다.

[ Counter.jsx ]

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { decrement, increment, incrementByAmount } from "../redux/counter";

const Counter = () => {
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>The Count is : {count}</h1>
      <button onClick={() => dispatch(increment())}>INCREMENT</button>
      <button onClick={() => dispatch(decrement())}>DECREMENT</button>
      <button onClick={() => dispatch(incrementByAmount(33))}>
        Increment by 33
      </button>
    </div>
  );
};

export default Counter;

useDispatch, useSelector와 같은 경우에는 기존의 redux에서도 사용했으므로 어렵지 않을 것이다.

 

그리고 App.js에 앞서 만들었던 Counter.jsx만 import 해주면 끝난다!

 

[ App.js ]

import React from "react";
import "./App.css";
import Counter from "./components/Counter";

function App() {
  return (
     <div className="App">
       <Counter />
     </div>
  );
}

export default App;

---

이렇게 보면 알겠지만 코드의 길이가 굉장히 줄어든 것을 알 수 있다.

redux는 아무래도 뭔가 하나 하려고 하면 작성해야할 것들이 많은데, 그것에 비해 굉장히 코드양이 줄어든 것을 확인 할  수 있었다.

물론 이번에는 간단한 것만 해서 그렇지만 앞으로 비동기를 위한 thunk 등을 활용해보면서 공부해봐야겠다.