useReducer Basics & Action Patterns
Learn useReducer: state + reducer(state, action) → next state. Use clear actions (type, payload) to handle multi-field updates.
useReducer Basics & Action Patterns is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why useReducer?
Goal: Use useReducer to manage updates with a single reducer function. It is handy when several fields change together.
- State object
- Actions: type + payload
- Pure reducer(state, action)
Reducer anatomy
Reducer takes the current state and an action, returns the next state. Keep it pure (no side effects). Use small action types like INCREMENT, RESET, or UPDATE_FIELD.
Demo: counter with useReducer
A tiny counter shows the state → action → next state loop using useReducer.
<div id="root"></div>
Action patterns
Keep actions simple:
- type: a short verb (e.g., UPDATE_FIELD)
- payload: data needed
- Optional small action creators to avoid typos
Demo: form with reducer
A form reducer handles multiple fields with a single UPDATE_FIELD action. One place controls all updates.
<div id="root"></div>
Tips & pitfalls
Tips:
- Keep reducers pure and small.
- Group related fields into one state object.
- Use clear action names; avoid many similar cases.
useReducer choice check
Recap
Recap: Define a pure reducer, dispatch simple actions, and manage multi-field updates in one place. Choose useReducer when several values change together.
Frequently asked questions
Is the “useReducer Basics & Action Patterns” lesson free?
Yes — the full text of “useReducer Basics & Action Patterns” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “useReducer Basics & Action Patterns”?
Learn useReducer: state + reducer(state, action) → next state. Use clear actions (type, payload) to handle multi-field updates. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “useReducer Basics & Action Patterns” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Context Basics & Avoiding Prop Drilling
- useReducer Basics & Action Patterns
- Context + Reducer: Simple State Containers