Context + Reducer: Simple State Containers
Combine Context + useReducer to build a tiny state container: Provider exposes state and dispatch via a custom hook.
Context + Reducer: Simple State Containers is a free React Academy lesson on CoddyKit — lesson 3 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 Context + Reducer?
Goal: Package state logic into a Provider (Context) + reducer. Children read via a small custom hook: no prop drilling, predictable updates.
Design steps
Pattern:
- Create Context
- Inside Provider: useReducer(state, action)
- Provide {state, dispatch}
- Make useCounter()-style hook that calls useContext
Demo: counter container
A minimal CounterProvider exposes state and dispatch; children use useCounter() to read/update.
<div id="root"></div>
Action & API guidance
Guidance:
- Keep actions small (INC, DEC, RESET).
- Co-locate reducer with Provider.
- Export only the custom hook so consumers stay simple.
Demo: todo container
A tiny TodoProvider shows multiple fields updating predictably with one reducer and a clean hook API.
<div id="root"></div>
Pitfalls & tips
Pitfalls:
- Forgetting to wrap children with the Provider.
- Putting huge objects in Context; pass only what is needed.
- Mutating state in the reducer—always return new objects.
Container pattern check
Recap
Recap: Context provides access; useReducer manages transitions. Export a small useXxx hook to read {state, dispatch} and keep consumers simple.
Frequently asked questions
Is the “Context + Reducer: Simple State Containers” lesson free?
Yes — the full text of “Context + Reducer: Simple State Containers” 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 “Context + Reducer: Simple State Containers”?
Combine Context + useReducer to build a tiny state container: Provider exposes state and dispatch via a custom hook. 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 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Context + Reducer: Simple State Containers” 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