Counter.jsx

import { useReducer } from 'react';

const initialState = {
  counter: 0,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENTAR':
      return {
        counter: state.counter + action.payload,
      };
    case 'DECREMENTAR':
      return {
        counter: state.counter - 1,
      };
    case 'REINICIAR':
      return {
        counter: action.payload,
      }
    default:
      return state;
  }
};

export default function Contador() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <h1>A contagem é {state.counter}</h1>
      <div>
        <button onClick={() => dispatch({
          type: 'DECREMENTAR'
        })}>Decrementar</button>
        <button onClick={() => dispatch({
          type: 'INCREMENTAR',
          payload: 1,
        })}>Incrementar +1</button>
        <button onClick={() => dispatch({
          type: 'INCREMENTAR',
          payload: 2,
        })}>Incrementar +2</button>
        <button onClick={() => dispatch({
          type: 'REINICIAR',
          payload: 0,
        })}>Reiniciar</button>
      </div>
    </>
  );
}