Reducers and Context

A reducer describes state transitions as actions. Context provides a value to descendants without passing it through every intermediate component.

Move transitions into a reducer

01function reducer(state, action) {
02  switch (action.type) {
03    case "completed": return { ...state, completed: [...state.completed, action.lesson] };
04    case "reset": return initialState;
05    default: throw new Error(`Unknown action: ${action.type}`);
06  }
07}
08
09const [state, dispatch] = useReducer(reducer, initialState);

Reducers must be pure. Actions describe what happened; the reducer determines the next state.

Provide shared state

01const CourseContext = createContext(null);
02<CourseContext value={{ state, dispatch }}>{children}</CourseContext>

Consume with useContext and fail clearly when the provider is missing. Split frequently changing contexts when unrelated consumers rerender too broadly.

Keep this

Use reducers for complex transitions, context for genuinely shared values, and keep both APIs narrow.