Attaching Payloads to Actions in React Redux

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