[TIL] 240216(금) Redux toolkit을 배워보자💪🏻

Redux toolkit을 배우기에 앞서 기존 redux 구조를 복습해보고 넘어가보도록 하자.

redux 폴더에는 config 폴더와 modules 폴더가 있다.

redux : 리덕스 관련 코드를 모두 몰아넣음
config : 리덕스 설정 관련 파일 전부
configStore : 중앙 state 관리소 => 설정 코드(.js)
modules : state의 그룹!

1. configStore.js에서 store를 생성한다.

// redux > config > configStore.js

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

const rootReducer = combineReducers({
  // modules 안에서 만든 모든 reducer들을 combineReducers로 만들어 rootReducer로 사용
  counter: counter,
});

// rootReducer를 가지고 store를 만든다
const store = createStore(rootReducer);

export default store;

2. index.jsx 파일에서 Provider api로 store를 불러와 사용한다.

// index.jsx

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { Provider } from "react-redux";
import store from "./redux/config/configStore.js";

ReactDOM.createRoot(document.getElementById("root")).render(

  // App 안에서 store 를 전역 상태 관리자로 사용할 수 있다.
  <Provider store={store}>
    <App />
  </Provider>
);

3. modules 안에서 reducer를 생성한다.

Action value와 Action creator를 생성하는 이유는 Human ERROR를 방지하기 위함!!

// redux > modules > counter.js

// 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
// initialState를 가지고 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;

4. App.jsx에서 dispatch를 할 때, type과 payload를 직접 전달하는 것이 아니라, action creator로 전달해준다!

// App.jsx

import { useDispatch, useSelector } from "react-redux";
import { addNumber, minusNumber } from "./redux/modules/counter";

function App() {
  const number = useSelector((state) => {
    return state.counter.number;
  });
  const dispatch = useDispatch();
  const onPlusBtnClickHandler = () => {
    dispatch(addNumber(1));
  };
  const onMinusBtnClickHandler = () => {
    dispatch(minusNumber(1));
  };
  return (
    <div>
      <div>{number}</div>
      <button onClick={onPlusBtnClickHandler}>+</button>
      <button onClick={onMinusBtnClickHandler}>-</button>
    </div>
  );
}

export default App;

Redux toolkit으로 변경하여 사용해보자.

Redux-Toolkit 패키지 설치

패키지를 먼저 설치한다.

yarn add @reduxjs/toolkit 또는 npm install @reduxjs/toolkit

🧐Redux-toolkit을 사용하면 좋은 점?

1. store를 구성하는 방법을 간편하게 사용할 수 있다.
2. reducer와 action creator를 간편하게 만들 수 있다.

1. configureStore로 store 생성

순수 store를 사용하지 말고, toolkit에 포함된 api인 configureStore api를 사용하여 store를 만들자

const store = configureStore({
// reducer가 들어가게 되며, 여러 개의 reducer가 들어갈 수 있으므로, 객체 안에 {key : value} pair인 reducer를 넣어준다. 

  reducer: {
    counter: counter,
  },
});

🚨 기존에는 api를 combineReducers 과 createStore 두 개를 써서 store를 만들었지만, configureStore api 하나로 store를 생성할 수 있다.

2. createSlice api로 action creator와 reducer를 한 번에 생성한다.

기존에는 action value와 action creator, reducer를 직접 코드를 짜서 만들어줘야했다.

이를 한 번에 만들 수 있는 api = createSlice : action creator와 reducer 를 한 번에 만들 수 있다.

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

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

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