useReducer and Reducer Usage

The `useReducer` hook in React is an alternative to `useState` for managing more complex state logic, especially when state transitions involve multiple sub-values or when the next state depends on the previous one in a more intricate way. It's often preferred over `useState` when the state logic is complex, involves multiple actions, or when you want to centralize state update logic.

Core Concepts:

1. Reducer Function: This is the heart of `useReducer`. It's a pure function that takes two arguments: the current `state` and an `action` object, and returns the *new* state. It should be a pure function, meaning it should not produce any side effects and for the same inputs (state and action), it should always return the same output. It's crucial that the reducer returns a *new* state object or array, rather than mutating the existing one (immutability).

* Signature: `(state, action) => newState`
* `state`: The current state value.
* `action`: An object describing what happened. By convention, actions typically have a `type` property (a string constant) to describe the action, and optionally a `payload` property containing any data needed to perform the update.

2. `initialState`: The starting value of your state.

3. `dispatch` Function: This function is returned by `useReducer`. You call `dispatch` with an `action` object to trigger a state update. When `dispatch` is called, React will run the reducer function with the current state and the provided action, and update the state based on the reducer's return value. This will cause the component to re-render.

How to Use `useReducer`:

The `useReducer` hook takes two arguments:

* `reducer`: The reducer function.
* `initialState`: The initial state value.

It returns an array with two elements:

* `state`: The current state value.
* `dispatch`: The dispatch function.

Syntax: `const [state, dispatch] = useReducer(reducer, initialState);`

When to use `useReducer` vs `useState`:

* `useState`: Ideal for simple state management, where state is a single value (number, string, boolean) or a simple object/array, and updates are straightforward (e.g., `setCount(count + 1)`).
* `useReducer`: Preferred for:
* Complex State Logic: When state transitions involve multiple sub-values or depend on previous states in a complex way.
* Related State: When multiple pieces of state are related or update together.
* Performance Optimization: When passing state up or down through many components, `dispatch` function identity is stable and doesn't change across re-renders, potentially preventing unnecessary re-renders in child components that only consume `dispatch`.
* Testability: The reducer function is a pure function, making it easier to test in isolation.
* Centralized Logic: Keeps all state update logic in one place (the reducer function), making it easier to understand and maintain.

import React, { useReducer } from 'react';

// 1. Define the reducer function outside the component
// It takes the current state and an action, and returns the new state.
// Actions typically have a 'type' property and an optional 'payload'.
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: action.payload }; // Use payload for dynamic reset value
    default:
      // It's good practice to throw an error for unknown action types
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// 2. Define the initial state
const initialCounterState = { count: 0 };

function Counter() {
  // 3. Use the useReducer hook
  // It returns the current state and a dispatch function.
  const [state, dispatch] = useReducer(counterReducer, initialCounterState);

  return (
    <div style={{
      fontFamily: 'Arial, sans-serif',
      padding: '20px',
      border: '1px solid #ccc',
      borderRadius: '8px',
      maxWidth: '300px',
      margin: '50px auto',
      textAlign: 'center'
    }}>
      <h2>Counter with useReducer</h2>
      <p style={{ fontSize: '2.5em', margin: '20px 0' }}>Count: {state.count}</p>
      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
        <button
          onClick={() => dispatch({ type: 'INCREMENT' })}
          style={buttonStyle}
        >
          Increment
        </button>
        <button
          onClick={() => dispatch({ type: 'DECREMENT' })}
          style={buttonStyle}
        >
          Decrement
        </button>
        <button
          onClick={() => dispatch({ type: 'RESET', payload: 0 })}
          style={buttonStyle}
        >
          Reset
        </button>
      </div>
    </div>
  );
}

const buttonStyle = {
  padding: '10px 15px',
  fontSize: '1em',
  cursor: 'pointer',
  borderRadius: '5px',
  border: '1px solid #007bff',
  backgroundColor: '#007bff',
  color: 'white',
  transition: 'background-color 0.3s ease',
  margin: '0 5px'
};

export default Counter;