Implementing a Global Store with Reducer + Context

Welcome to the first unit of Advanced React State Architecture course. Today, you will set up the backbone of Brew Rush: a single, centralized store powered by useReducer and React Context. This is the foundation that will let you manage complex, game-like state transitions cleanly across the app.

You will create a GameProvider that exposes state and dispatch to any component, plus a couple of hooks that make consuming the store safe and ergonomic.

Building the Context, Provider, and Safe Hooks

Here is the context module that defines the store, provides it to the app, and exports two hooks for usage and selection:

What this does:

  • createContext sets up a dedicated context for the game store.
  • useReducer initializes state using getInitialState and returns [state, dispatch]. The reducer stub handles a simple SET_SCREEN action.
  • GameProvider makes state and dispatch available to all descendants.
  • useGameContext ensures you only use the store inside the provider; it throws a clear error otherwise.
Wiring the Provider at the App Root

Wrap your application with the provider so every component can access the global store:

What this does:

  • GameProvider wraps the app, enabling any child to call useGameContext or useGameSelector.
  • The UI shows a simple confirmation message; we will add real screens next.
Summary and What’s Next

You now have a centralized store with useReducer and Context, a safe access hook, and a selector helper. This is the backbone that will power Brew Rush’s complex state and screen transitions — cleanly and predictably — without prop drilling.

You are ready to put this pattern to work. Head to the practice section to wire up interactions and see how dispatch-driven state updates flow through your UI.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal