Basic Counter with useReducer

Create a basic counter that increments and decrements a value using useReducer instead of useState for state management.
import React, { useReducer } from 'react';
Import the 'useReducer' hook from React.
// Action types for our counter
const INCREMENT = 'increment';
const DECREMENT = 'decrement';
Define the action types our counter reducer will handle.
// Reducer function that takes the current state and an action, and returns a new state
cost counterReducer = (state, action) => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
      return state;
Create a reducer function with a switch statement handling increment and decrement actions.
// Counter component
function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>+</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>-</button>
Define the Counter component using the useReducer hook with our counterReducer and a default initial state. It also renders the count and buttons to dispatch increment and decrement actions.