📑 useReducer

Chapter: State & Hooks — Core Patterns · Level ★★★ · Time: 20 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Write a reducer functionDispatch actionsKnow when to prefer useReducerStructure a cart-like reducer

📚 Quick Recap

🎯 What you'll practice: Reducer functions, dispatching, and useReducer vs useState.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5A reducer typically uses a statement on action.type.

6The default case in a reducer should return the unchanged .

7Write a reducer case for action.type "INCREMENT" that adds 1 to state.count.

8Write the dispatch call to trigger that increment action.

9Why is useReducer a better fit than useState for a shopping cart with add/remove/clear actions?

🚀 Section C · Challenge ● CHALLENGE 5

10Write a full reducer for a todo list supporting ADD, TOGGLE, and DELETE actions, plus the useReducer call.

💭 Reflection — the most useful thing I learned:

A ___/4 B ___/11 C ___/5 Total ___/20 Teacher's Signature Parent's Signature

✂ answer key — fold or cut before handing out

1-A 2-B 3-B 4-B | 5 = switch 6 = state 7 = case "INCREMENT": return {...state, count: state.count+1}; 8 = dispatch({type:"INCREMENT"}); 9 = Because add/remove/clear are related actions that all modify the same cart state in different ways — centralising them in one reducer keeps the update logic in one place instead of scattered across multiple setState calls | 10 = function reducer(state,action){switch(action.type){case"ADD":return [...state,{id:Date.now(),text:action.text,done:false}];case"TOGGLE":return state.map(t=>t.id===action.id?{...t,done:!t.done}:t);case"DELETE":return state.filter(t=>t.id!==action.id);default:return state;}} const [todos,dispatch]=useReducer(reducer,[]);

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5