Real-world mini-appsPath 35/40
ReducersState & eventsConditional rendering
Your workspace must pass its server-side browser checks to complete this challenge.
Task Status Stepper
A task card tracks its status through three stages. The starter uses setStatus directly in each button's onClick. Replace it with a useReducer so every status change has a named, guarded action.
Requirements
- Define
Action as a union of { type: "start" }, { type: "complete" }, and { type: "reopen" }.
- Write a
reducer(status, action) that returns the next status, guarding each transition so it only fires from the valid preceding status.
- Replace
useState<Status> with useReducer(reducer, "todo").
- Call
dispatch({ type: "..." }) in each button's onClick.
What to explain
Why does moving transitions into a reducer make impossible state changes harder to introduce by accident?
Progressive hints
useReducer(reducer, initialValue) returns [state, dispatch] — the same shape as useState.- In the reducer,
switch (action.type) covers each of the three action types.
- A guard like
status === "todo" ? "in_progress" : status means a misplaced dispatch call leaves the state unchanged instead of corrupting it.