useReducer — React Deep Dive

useState → useReducer: the evolution

useState gives you one value and one setter. When state logic grows — multiple fields, conditional updates, action-driven transitions — N independent setters become spaghetti. useReducer centralizes all transitions in ONE pure function: reducer(state, action) → newState. You call dispatch({{type:'ADD', text:'Learn React'}}) and the reducer decides what happens.

piece	role	analogy
`reducer`	pure function: (state, action) → newState	the gearbox — receives a gear shift, outputs new speed
`dispatch`	sends an action to the reducer	the gear shift — you don't change gears directly, you request a shift
`action`	plain object: `{{type, ...payload}}`	the shift instruction — "shift up", "shift down"
`initialState`	the starting state	neutral gear — where you begin

1 · the reducer you write (edit me)

var nextId = 0;

function todoReducer(todos, action) {
  switch (action.type) {
    case 'ADD': {
      return [...todos, { id: ++nextId, text: action.text, done: false }];
    }
    case 'TOGGLE': {
      return todos.map(function (t) {
        return t.id === action.id ? { ...t, done: !t.done } : t;
      });
    }
    case 'DELETE': {
      return todos.filter(function (t) { return t.id !== action.id; });
    }
    default:
      return todos;
  }
}

function TodoApp() {
  var _React$useReducer = React.useReducer(todoReducer, []),
      todos = _React$useReducer[0],
      dispatch = _React$useReducer[1];

  return (
    <div className="max-w-sm mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-lg font-bold text-[#61dafb] mb-3">
        Todo ({todos.length})
      </h2>
      <div className="flex gap-2 mb-4">
        <input
          data-testid="input"
          className="flex-1 px-3 py-2 bg-[#0d1117] border border-[#30363d] rounded text-[#e6edf3] text-sm outline-none"
          placeholder="Add a todo..."
        />
        <button
          data-testid="add"
          className="px-4 py-2 bg-[#61dafb] text-[#0d1117] rounded font-bold text-sm hover:opacity-80"
          onClick={function () {
            var input = document.querySelector('[data-testid="input"]');
            var text = (input && input.value) ? input.value : ('Item ' + (todos.length + 1));
            dispatch({ type: 'ADD', text: text });
            if (input) input.value = '';
          }}
        >
          Add
        </button>
      </div>
      <ul data-testid="list" className="space-y-2">
        {todos.map(function (todo) {
          return (
            <li
              key={todo.id}
              data-testid="todo"
              data-done={todo.done ? 'true' : 'false'}
              className="flex items-center gap-3 p-3 bg-[#0d1117] rounded border border-[#30363d]"
            >
              <span
                data-testid="toggle"
                data-todo-id={todo.id}
                className={"flex-1 cursor-pointer select-none " + (todo.done ? 'line-through text-[#8b949e]' : 'text-[#e6edf3]')}
                onClick={function () { dispatch({ type: 'TOGGLE', id: todo.id }); }}
              >
                {todo.done ? '✅ ' : '⬜ '} {todo.text}
              </span>
              <button
                data-testid="delete"
                data-todo-id={todo.id}
                className="text-[#e74c3c] text-sm hover:font-bold"
                onClick={function () { dispatch({ type: 'DELETE', id: todo.id }); }}
              >
                ✕
              </button>
            </li>
          );
        })}
      </ul>
      <p data-testid="summary" className="mt-3 text-xs text-[#8b949e]">
        {todos.filter(function (t) { return t.done; }).length + ' of ' + todos.length + ' done'}
      </p>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<TodoApp/>);

2 · Babel compiles JSX → element tree

<TodoApp/> becomes React.createElement(TodoApp). Each dispatch() calls the reducer, React gets the new state, re-renders.

// (hit "compile & render" to see Babel's output)

3 · live React (the dispatch model, proven)

Click "Add" to dispatch {'{type:"ADD"}'}, click a todo to dispatch {'{type:"TOGGLE"}'}, click ✕ to dispatch {'{type:"DELETE"}'}. The gold-check does this automatically: 3× Add, toggle item 1, delete item 1 → asserts the reducer handled every action correctly.

items: — · gold: 3× Add → toggle → delete → expect 2 items, 0 done

intent → pattern

intent	pattern	why
add an item	`case 'ADD': return [...state, newItem]`	immutable spread — never `.push()`
update one item	`state.map(t => t.id === id ? {...t, done: !t.done} : t)`	map returns a new array; spread copies the matched item
remove an item	`state.filter(t => t.id !== id)`	filter returns a new array without the removed item
reset everything	`case 'CLEAR': return []`	or remount with a new `key` to wipe all state
multi-field state	`{count:0, step:1, status:'idle'}` + action-driven transitions	one reducer replaces N setters — all transitions in one place