리덕스 툴킷 사용해보기

리덕스툴킷이란?

• (1) 리덕스툴킷리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다.
• 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로 생각하시면 됩니다.
• (2) 새로운 것인가? 아니다.즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었습니다.
• 컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같습니다. 바뀐 부분은 그저 모듈 파일 뿐이죠. 다음 챕터에서 일반 리덕스와 툴킷의 요소를 비교해서 어떤 식으로 바뀌었는지 살펴보겠습니다.
• 리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같습니다.

 

기존의 쓰던 리덕스 방식에서 툴킷으로 변경한 유튜브 영상이다 아주 잘 설명돼있다.

 

나도 한번 해보려한다.

 

yarn add react-redux @reduxjs/toolkit

리덕스 툴킷 설치

 

 

똑같은 리덕스 폴더 구조

 

 

// import { createStore } from "redux";
// import { combineReducers } from "redux";
// import counter from "../modules/counter";

// const rootReducer = combineReducers({
//   counter,
// });
// const store = createStore(rootReducer);
// export default store;

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

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

export default store;

주석 친 부분이 이전 소스이다.

createStrore와 combineReducers부분을 합쳐서configureStore 하나로 정리 됐다.

같은 것 이지만 소스는 간결해졌다.

 

 

// // Action Value
// const ADD_NUMBER = "ADD_NUMBER";
// const MINUS_NUMBER = "MINUS_NUMBER";

// // Action Creator
// export const addNumber = (payload) => {
//   return {
//     type: ADD_NUMBER,
//     payload,
//   };
// };

// export const minusNumber = (payload) => {
//   return {
//     type: MINUS_NUMBER,
//     payload,
//   };
// };

// // Initial State
// const initialState = {
//   number: 0,
// };

// // Reducer
// const counter = (state = initialState, action) => {
//   switch (action.type) {
//     case ADD_NUMBER:
//       return {
//         number: state.number + action.payload,
//       };
//     //
//     case MINUS_NUMBER:
//       return {
//         number: state.number - action.payload,
//       };
//     default:
//       return state;
//   }
// };

// // export default reducer
// export default counter;

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;

리듀서 부분이 대박이다.

action을 만들고 switch나 if문으로 검사하는 과정이 사라졌다.

이전 기능을 모두 합친 툴킷의 createSlice만 가져와서 셋팅해주면된다.

 

그리고 리듀서와 action들을 export해주면 사용할수있다.

너무 편해짐...

 

이두개를 제외하면 이전 리덕스와 사용법은 동일하다.

Provider컴포넌트로 스토어의 범위를 정하고

useSelector와 useDispatch를 이용해 store의 상태값을 불러오고 조정한다.

 

index.js

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 './redux/config/configStore';


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

reportWebVitals();

App.js

import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import './App.css';
import { addNumber, minusNumber } from './redux/modules/counterSlice';

function App() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  const [inputText, setInputText] = useState();

  const changeHandle = (e) => {
    setInputText(e.target.value);
  }

  return (
    <div className="App">
      {counter.number}
      <input onChange={changeHandle} />
      <button onClick={() => { dispatch(addNumber(Number(inputText))) }}>addNumber</button>
      <button onClick={() => { dispatch(minusNumber(Number(inputText))) }}>minusNumber</button>
    </div>
  );
}

export default App;

간단한 실행 화면이다.

이전과 동일하게 작동 하는것을 확인 할수있다.

리덕스에서도 툴킷을 사용하라고 권장하니 앞으로 이것만 써야겠다.