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;
'노마드코더 > React-Redux' 카테고리의 다른 글
3. Redux Toolkit (0) | 2024.05.14 |
---|---|
1. useSelector, Provider (0) | 2024.05.12 |