[React] increment , decrement button using react-redux, redux toolkit

redux-toolkit으로 작업을 하게 될 경우가 많아 사용방법 이해에 혹시 도움이 될까하여

redux-toolkit 내의 slice 구문을 활용하여 간단한 increment, decrement 버튼 예제를 만들어보았다.

 

우선 vsc(visual studio code)를 사용하여 파일 트리구조를 살펴보자면 하단과 같다.

redux-toolkit과 관련된 직접적인 코드는 features의 slice형태로 작성되었다.

 

npm install @reduxjs/toolkit react-redux redux

 

1. redux-toolkit과 react-redux, redux를 npm으로 인스톨해준다.

2.기본 create-react-app으로 생성한 index.js의 내부에 Provider로 App.js를 감싸주고 redux-toolkit 로직을 삽입하기 위한 store파일을 생성하여 주입해준다.

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 "./features/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

3. 비동기(해당 튜토에서는 제외) 혹은 상태관리 slice들은 combineReducers로 묶어 configureStore 내부에 삽입할 수 있다.

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import CommonSliceReducer from "./CommonSliceReducer";
const reducers = combineReducers({
  common: CommonSliceReducer
});
const store = configureStore({
  reducer: reducers
});
export default store;

4. 각각 sliceReducer는 redux-toolkit에서 제공하는 createSlice로 간단하게 상태관리를 할수 있게끔 구성되어있다.

createSlice 안에는 다양한 reducer을 첨가할 수 있는데, 크게 보면 비동기가 아닌 reducer, 비동기 reducer로 나눌 수 있다.

단순 상태관리만 필요로 하기 때문에 하단과 같이 간단한 방식으로 initialStae 및 increment, decrement 함수를 설정하고

export하여 사용할수 있다.

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

const initialState = {
  section: "common",
  i: 0
};
const CommonSliceReducer = createSlice({
  name: "common",
  initialState,
  reducers: {
    increment: (state) => {
      state.i += 1;
    },
    decrement: (state) => {
      state.i -= 1;
    }
  },
  extraReducers: {}
});
export const { increment, decrement } = CommonSliceReducer.actions;
export default CommonSliceReducer.reducer;

5.렌더링을 원하는 페이지에 react-redux에서 제공하는 useDispatch 를 사용하여 클릭시 액션값을 추가 할 수 있다.

상태가 변경된 후상태 값은 react-redux의 useSelector를 사용하여 console값을 찍어보면 상태값 변경을 확인 할 수 있다.

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../../features/CommonSliceReducer";
const ReduxNavigate = () => {
  const count = useSelector((state) => state.common.i);
  const dispatch = useDispatch();
  return (
    <div className="padding10">
      <span>ReduxNavigate</span>
      <div className="flexgap20">
        <div
          className="border"
          style={{
            width: "20px",
            height: "20px"
          }}
        >
          {count}
        </div>
        <span
          className="bgred100 padding10 rounded cursorpointer"
          onClick={() => {
            dispatch(increment());
          }}
        >
          increment
        </span>
        <span
          className="bgred100 padding10 rounded cursorpointer"
          onClick={() => {
            dispatch(decrement());
          }}
        >
          decrement
        </span>
      </div>
    </div>
  );
};

export default ReduxNavigate;