2. useDispatch

dispatch : reducer에게 메세지(action)를 전달하는 함수

 

page - <reduxCount.js>

  ※useDispatch : react-redux에서 디스패치를 사용할 수 있게 함

import React from "react";
import { useDispatch, useSelector } from "react-redux";

function ReduxCount() {
  const count = useSelector((state) => state);
  const dispatch = useDispatch(); //디스패치

  const addCount = (e) => {
    e.preventDefault();
    dispatch({ type: "ADD" }); //카운터 증가
  };
  const minusCount = (e) => {
    e.preventDefault();
    dispatch({ type: "MINUS" }); //카운터 감소
  };

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

export default ReduxCount;