Why should you care?

Forms with many fields, wizards, and shopping carts often have predictable update rules — dispatch({ type: "ADD_ITEM", payload }) keeps logic in one place.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

Run Example »

Edit the code and click Run to see the result update live.

What happened?

• All update logic lives in reducer.
• Components only dispatch actions.
• Easier to test reducer in isolation.

Try it yourself

1. Define action types as strings or constants.
2. Write reducer with switch or if.
3. Replace multiple related useState with one useReducer.
4. Change text or labels in the example and save — watch the browser update.
5. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

useReducer(reducer, initialState) → [state, dispatch]. Good for complex state transitions. Keep reducer pure — no side effects inside.