Hands-on practice for this lecture. Write the code, see it run, understand the pattern.
Exercise 1 of 2
Add tasks — nothing appears, even though dispatch is working. The reducer mutates state instead of returning a new array. Find the bug and fix it.
Task
Type a task and click Add. Nothing appears — even though the store IS receiving the action.
Open App.js and find the bug in tasksReducer. The reducer mutates the existing array, so Redux sees the same reference and never notifies subscribers.
Fix: replace state.push() with a spread that returns a new array.
Exercise 2 of 2
Live editor: implement a Redux reducer for a task list — ADD_TASK, TOGGLE_TASK, REMOVE_TASK. The UI is pre-built; your reducer drives everything.
Task
Implement taskReducer to manage an array of tasks. Handle three action types:
ADD_TASK — append { id, text, done: false }TOGGLE_TASK — flip done for the matching idREMOVE_TASK — filter out the task with matching idThe UI wires up automatically. Add tasks, check them off, delete them — it all goes through your reducer.