3. Redux Toolkit

Redux-Toolkit : Redux를 더 간결하고 편리하게 사용할 수 있는 pakage
  -리덕스보다 더 짧은 코드로 짤 수 있음
  -state를 mutate(변형)이 가능함. 단 리턴을 해야 함 ex) return store.push() = O

>> npm install @reduxjs/toolkit //redux toolkit 설치

 

redux - <count.js>

※createSlice : Redux-Toolkit에서 reducer를 생성하는 함수.

    -name : 이름

    -initialState : 초기값

    -reducers : 리듀서 생성

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

const countSlice = createSlice({ //슬라이스 생성
  name: "count", //슬라이스 이름
  initialState: 0, //슬라이스 초기값
  reducers: { 
    ADD: (state, action) => { //증가 액션
      return (state = state + 1);
    },
    MINUS: (state, action) => { //감소 액션
      return (state = state - 1);
    },
  },
});

export const { ADD, MINUS } = countSlice.actions; //생성한 액션을 추출
const countReducer = countSlice.reducer; //생성한 리듀서를 추출

export default countReducer;

 

redux - <store.js>

※configureStore : Redux-Toolkit에서 Redux Store를 생성하는 함수
    -createStore보다 더 간편하게 스토어 설정

import { configureStore } from "@reduxjs/toolkit";
import countReducer from "./count";

const store = configureStore({ //스토어 생성
  reducer: {
    count: countReducer,
  },
});

export default store;

 

<index.js>

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/store";

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

 

page - <reduxCount.js>

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { ADD, MINUS } from "../redux/count"; //카운트 액션 가져옴

function ReduxCount() {
  const count = useSelector((state) => state.count); //state를 count로 지정
  const dispatch = useDispatch();

  const addCount = (e) => {
    e.preventDefault();
    dispatch(ADD()); //증가 디스패치
  };
  const minusCount = (e) => {
    e.preventDefault();
    dispatch(MINUS()); //감소 디스패치
  };

  return (
    <div>
      <button onClick={addCount}>증가</button>
      <span> 카운트 : {count} </span>
      <button onClick={minusCount}>감소</button>
    </div>
  );
}

export default ReduxCount;