Counter.js
import {useSelector, useDispatch} from 'react-redux'; function Counter() { const counter = useSelector(state => state.counter); const dispatch = useDispatch(); return ( <div> <div>Counter : {counter}</div> <div> <button onClick={() => dispatch({type: "increment", payload: 1})}>+1</button> <button onClick={() => dispatch({type: "decrement", payload: 1})}>-1</button> <button onClick={() => dispatch({type: "increment", payload: 5})}>+5</button> <button onClick={() => dispatch({type: "decrement", payload: 5})}>-5</button> </div> </div> ); } export default Counter;
store.js
import {configureStore} from '@reduxjs/toolkit'; const counterReducer = (state = {counter: 0}, action) => { if (action.type === "increment") { return {...state, counter: state.counter + action.payload}; } else if (action.type === "decrement") { return {...state, counter: state.counter + action.payload}; } return state; } export const store = configureStore({ reducer: counterReducer });
References
https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#actions