Summary - useReducer pattern

Write a multi-step form wizard reducer and connect it.

Summary - useReducer pattern

In this group you learned what a reducer is, action types, composition, and the switch structure. Now you can manage complex state in an organized way.

The recipe: a separate reducer per state part, action types via constants, type in switch, combine with a root reducer. This gives a clear roadmap when useState falls short.

In the next step you'll write a Wizard component using useReducer for a multi-step form.

Exercise Wizard skeleton

Complete the skeleton. Write a Wizard component. Call useReducer(wizardReducer, { '{ step: 0, data: {} }' }); destructure as [state, dispatch]. Return <div><p>Step: { '{ state.step }' }</p><button onClick={ '{ () => dispatch({ '{ type: "NEXT" }' }) }' }>Next</button></div>. Export it.

Show example solution

import { useReducer } from "react";

function Wizard() {
  const [state, dispatch] = useReducer(wizardReducer, { step: 0, data: {} });
  return (
    <div>
      <p>Step: {state.step}.</p>
      <button onClick={() => dispatch({ type: "NEXT" })}>Next</button>
    </div>
  );
}

export default Wizard;

Test yourself

When is useReducer preferred?
- For complex state transitions
- For simple counting
- For CSS changes
- In useEffect
Show answer

For complex state transitions — useReducer is preferred for complex state.
Match the useReducer pattern

switch

type branch
constant

ADD
composition

sub-reducer
useReducer

[state, dispatch]

Next lesson: Project: Cart management

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies