Managing Complex State with useReducer

1. The Core Idea: Separating Logic from Your Component

As a Laravel developer, you're familiar with the principle of separation of concerns—keeping your business logic (in models or services) separate from your presentation logic (in Blade templates). The useReducer hook brings a similar philosophy to React components.

Instead of putting all the state update logic directly inside your event handlers (like handleClick), you move it into a single, separate function called a reducer.

This flow has four key parts:

1. State: The data for your component, just like with useState.
2. Action: An object that describes what change you want to make. For example, { type: 'INCREMENT_COUNT' }.
3. Dispatch: A special function that you call to "send" an action to the reducer.
4. Reducer: A pure function that takes the current state and an action and returns the new state.

Here is a visual representation of how they work together:

This pattern organizes your code, makes complex state transitions more predictable, and simplifies testing.

2. The useReducer Syntax and Terminology

Let's get familiar with the basic setup.

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

This looks similar to useState, but with a few key differences:

• It returns the current state and a dispatch function (instead of a state setter).
• It takes two required arguments:
  1. reducer: The function that contains your state logic.
  2. initialState: The initial value of your state.

The video below gives a great introduction to the purpose of useReducer and its basic syntax.

3. Building Your First Reducer

The best way to understand useReducer is to build one. We'll start with a simple counter.

Step 1: Define the initialState and reducer function

First, we define the starting state and the reducer function outside our component. By convention, action types are often written as uppercase strings.

// Outside your component
const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      // Return a NEW state object
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      // It's good practice to throw an error for unhandled actions
      throw new Error('Unhandled action type: ' + action.type);
  }
}

Crucially, the reducer must return a new state object. We never modify the existing state directly (a principle called immutability). The spread syntax (...state) is perfect for creating a copy and then overwriting the properties that need to change.

Step 2: Wire it up in the component

Inside your component, you call useReducer and use the dispatch function in your event handlers.

import React, { useReducer } from 'react';

// ... (initialState and reducer function from above)

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

When a button is clicked, we dispatch an action object. React then calls our reducer with the current state and that action, calculates the new state, and re-renders the component.

The following video walks through this exact process. Note that the video uses TypeScript, which requires defining interface types. You can ignore that part; the JavaScript logic for the reducer and dispatch calls is the same.

4. Handling Complex, Related State

The counter example is simple, but what if our state logic was more complex? This is where useReducer truly shines.

Imagine we want to add rules to our counter: the count cannot go above 5 or below 0. If a user tries to, we should show an error message.

Our state now has two related pieces of data: the count and an error message.

const initialState = { count: 0, error: null };

All the logic for updating both of these can live inside the same reducer. This keeps our component clean and the logic centralized.

As you saw, the increment case in the reducer now looks something like this:

case 'INCREMENT': { // Braces create a new block scope
  const newCount = state.count + 1;
  const hasError = newCount > 5;
  return {
    ...state, // Copy existing properties
    count: hasError ? state.count : newCount, // Only update if no error
    error: hasError ? 'Maximum reached' : null // Set or clear the error
  };
}

With a single dispatched action { type: 'INCREMENT' }, the reducer handles all the complex conditional logic and returns a completely new, consistent state object. Trying to do this with useState would likely involve multiple useState calls and more complex logic inside the event handler itself.

5. When to Use useReducer vs. useState

So, should you replace all your useState hooks with useReducer? No. The choice depends on the complexity of your state.

To summarize the article's points:

• Prefer useState when:
  • State is a simple primitive (string, number, boolean).
  • The state logic is very simple.
  • You are managing multiple, unrelated pieces of state.
• Prefer useReducer when:
  • State is a complex object or array.
  • The next state value depends on the previous one.
  • Multiple state values are related and should be updated together.

Conclusion

You've just learned one of the most powerful hooks in the React library. It allows you to write cleaner, more scalable, and more maintainable state logic.

Key Takeaways:

• useReducer is a hook for managing complex state logic by separating it from your component.
• It works with a reducer function that takes the current state and an action object, and returns a new state.
• You trigger state updates by calling the dispatch function with an action (e.g., dispatch({ type: 'ADD_ITEM' })).
• useReducer is ideal when your state is a complex object or when multiple pieces of state are interdependent.

Preview of the Next Lesson:

useReducer is fantastic for managing complex state within a single component. But what if multiple, distant components need to access or modify that same state (like a shopping cart)? Passing props down through many layers ("prop drilling") is cumbersome.

In our next lesson, we will solve this by learning how to create a React Context. We'll then see how to combine useReducer and useContext to create a powerful, scalable global state management solution—a key pattern for building your e-commerce project.