A small shop store: action hooks and derived hooks
Product never sees the cart; Header never builds an action object. Signing out clears the user and the cart in one action, so the header can't show a cart that belongs to nobody.
Combine a reducer (all the update logic) with context (reach anywhere): a provider component owns useReducer and puts state and dispatch in two separate contexts, and small custom hooks such as useTasks() and useTasksDispatch() let any component read or update the store without props.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a NotificationsProvider with a reducer (added, dismissed), two contexts and two hooks, useNotifications() and useNotify() (which returns a notify(text) function).
Write a useTaskActions() hook for the task store that returns { addTask, toggleTask, deleteTask }, and explain why it uses useMemo.
Explain it without notes
Why do you combine useReducer with context? What does each part contribute?
Why use two contexts, one for state and one for dispatch?
What is the point of custom hooks like useTasks() instead of calling useContext directly?
What are the limits of reducer + context, and what would you use beyond them?
Preview
Console
Nothing logged yet.Expected console output
Hi, Asha · 3 items · ₹55