import { useState } from "react";
**import { useDispatch } from "react-redux";**
import "./App.css";

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

  **const dispatch = useDispatch();**

  const decreaseHandle = () => {
    **dispatch({type: "DECREASEMENT"}) // Action의 이름을 type에 정해줌, payload는 옵**
    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;

1. useDispatch를 import 한다.

2. import한 useDispatch를 dispatch에 할당한다.

3. 어떠한 동작을 했을 때 = state 값이 변경 될 때 → 동작하는 함수 안에

   dispatch 함수를 사용

   항상 dispatch({type: “ActionName”, payload: optional}) 필수요소인 type이라는 키와 옵션인 payload를 담아서 보낸다.

🚩 dispatch가 던진 action 받기

reducer는 dispatch가 던진 action을 자동으로 받아올 수 있다.