State Architecture with useReducer

For State Architecture with useReducer, identify the owner, source of truth, update event, and derived values. Keep updates immutable and express user intent through event handlers or reducer actions.

Build a Complete Mental Model

For State Architecture with useReducer, identify the owner, source of truth, update event, and derived values. Keep updates immutable and express user intent through event handlers or reducer actions.

Apply It in Production React

Test an original State Architecture with useReducer example with empty/loading/error states, keyboard-only interaction, a slow network, rapid repeated events, and component unmount/remount cases. Verify behavior with the browser console, React DevTools, tests, and profiler where relevant.

After This Lesson

• Explain the source of truth and component boundary
• Build an example with keyboard and failure states
• Verify one user-visible behavior with a test or profiler

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'reset': return { count: 0 };
    default: throw Error('Unknown action: ' + action.type);
  }
}

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

The reducer handles increment and reset as explicit user actions.

Extracting State Logic into a Reducer — React