📌경로

src/reducer/reducer.js

📌 기본형

let initialState = {};

function reducer(state = initialState, action) {}

export default reducer;

✏️

import { useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  const decreaseHandle = () => {
    setCount((prev) => prev - 1);
  };

  const increaseHandle = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div style={{ fontSize: "36px" }}>
      <button onClick={decreaseHandle}>-</button>
      <span>{count}</span>
      <button onClick={increaseHandle}>+</button>
    </div>
  );
}

export default App;

let intialState = {
  count: 0,
};

function reducer(state = intialState, action) {}

export default reducer;

import { legacy_createStore as createStore } from "redux";
import reducer from "./reducer/reducer";

let store = createStore(reducer);

export default store;

🚩 reducer는 두개의 매개변수를 갖는다.

• state

  → 저장하고 싶은 state 가져오기

  → 초기화 필요

  → 매개변수 state 자리에 초기 값 넣어주기

• action → 어떤 행동을 해야할지 정해줌

🚩 store에서 reducer를 import해와서 쓸 수 있다.

🚩 그렇다면, reducer가 store를 바꾸는 방법!

“return”값으로 바꾼다.

store는 가만히 있다가 reducer가 어떤 값을 반환해주면, 그 return 값을 적용한다.

let intialState = {
  count: 0,
};

function reducer(state = intialState, action) {
  console.log("action:", action);
  if (action.type === "DECREASEMENT") {
    **return { ...state, count: state.count - 1 };**
  }
  **return { ...state };**
}

export default reducer;