Fullstack CourseLearn by building
Back to week 2

Topic

Extracting state logic into a reducer

Definition

A reducer is a pure function that derives the next state from the current state and an action describing an event.

In simpler words

Move many related state updates into one named function so handlers only describe what happened.

useReducer, actions, and pure transition logic.

After this you can

  • Organize complex local state without hiding transitions.
  • Explain the trade-off to a teammate using a small example.
  • Name at least one common bug pattern for this topic.

Understand Extracting state logic into a reducer

useReducer, actions, and pure transition logic.

Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.

Extracting state logic into a reducer in code

function reducer(state, action) {
  if (action.type === "added") return [...state, action.ticket];
  return state;
}

Read the example from data and control flow to the resulting UI. Keep the component boundary small.

Apply Extracting state logic into a reducer

Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.

Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.

Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?

Where bugs hide

Definition

High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.

In simpler words

Each mistake below shows Wrong vs Right code — compare them side by side.

When something misbehaves, match the symptom to a pattern below before rewriting the feature.

Prefer fixing the ownership or update path over adding another Effect or sync step.

Mistake: Mutate in reducer (no Immer)

// Wrong
function reducer(state, action) {
  state.items.push(action.item);
  return state;
}

// Right
function reducer(state, action) {
  return { ...state, items: [...state.items, action.item] };
}

Return new state (unless you intentionally use Immer).

Mistake: Async Nest call inside reducer

// Wrong
function reducer(state, action) {
  ticketsApi.create(action.dto);
  return state;
}

// Right
// dispatch from handler after await mutation
dispatch({ type: "added", ticket });

Reducers stay pure; side effects live in handlers/Effects.

Mistake: Reducer for one boolean

// Wrong
useReducer(toggleReducer, false)

// Right
const [on, setOn] = useState(false);

useState is enough for simple toggles.

Live playground

Extracting state logic into a reducer sandbox

Change one input at a time and predict the next render.

count = 0

dispatch({ type: "inc" })

Keep in mind

  • Keep the formal definition in mind; it explains which tool belongs where.
  • Prefer one source of truth over synchronized copies of the same value.
  • When behavior surprises you, trace: input → update → render → committed UI.
  • Study the Wrong vs Right examples in “Where bugs hide” before you merge.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.

Checking your session…

10 questions · concept 3 · syntax 3 · practical 2 · logic 2

Concept1. Which statement best defines Extracting state logic into a reducer?
Syntax2. Which implementation matches Extracting state logic into a reducer?
Practical3. When building a feature, when is Extracting state logic into a reducer the right choice?
Logic4. What reasoning keeps Extracting state logic into a reducer predictable as values change?
Concept5. Which statement best defines Extracting state logic into a reducer?
Syntax6. Which implementation matches Extracting state logic into a reducer?
Practical7. When building a feature, when is Extracting state logic into a reducer the right choice?
Logic8. What reasoning keeps Extracting state logic into a reducer predictable as values change?
Concept9. Which statement best defines Extracting state logic into a reducer?
Syntax10. Which implementation matches Extracting state logic into a reducer?