redux-toolkit

이서현·2022년 6월 27일

1. yarn add @reduxjs/toolkit react-redux

2. store만들기

// store.js
import { configureStore } from "@reduxjs/toolkit";

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

3. state를 가져다 쓸려면 스토어랑 컴포넌트랑 연결해주기

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

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

4. slice 생성

초기 상태, 리듀서 함수의,슬라이스 이름을 받아
리듀서 및 상태에 해당하는 액션 생성자와 액션 유형을 자동으로 생성하는 함수

// counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: 0,
  name: "서현",
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      // action.payload? dispatch할 때  보내준 데이터
      state.value += action.payload;
    },
  },
});

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

export default counterSlice.reducer;

export const getValue = (state) => state.counters.value;
// state.counters <--- counters는 내가 store.js에서 붙여준 이름
// reducer: { counters: counterSlice },

5. 만든 슬라이스를 스토어에 추가해주기

// store.js
import { configureStore } from "@reduxjs/toolkit";

import counterSlice from "./counterSlice";

export const store = configureStore({
  reducer: { counters: counterSlice },
});

6. 이제 사용해 볼까?

👀데이터를 읽고 싶을 땐? useSelector

🚀액션을 일으키고 싶을 땐? useDispatch

// App.js
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  decrement,
  increment,
  incrementByAmount,
  getValue

} from "./counterSlice";

function App() {
  const count = useSelector((state) => state.counters.value);
  const count2 = useSelector(getValue);
  //count와 count2의 	값은 똑같다
 // 선생님이 count2의 방법으로 불러와서 사용하라고 했는데 이유는 까먹었다...
  const dispatch = useDispatch();
  
  const [incrementAmount, setIncrementAmount] = useState("2");
  
  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>
          {count},{count2}
        </span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>

        <input
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={(e) => setIncrementAmount(e.target.value)}
        />
        <button
          onClick={() => dispatch(incrementByAmount(Number(incrementAmount)))}
        >
          Add Amount
        </button>
        <h2>{incrementAmount}</h2>
      </div>
    </div>
  );
}

export default App;