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.
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:
createContextsets up a dedicated context for the game store.useReducerinitializes state usinggetInitialStateand returns[state, dispatch]. The reducer stub handles a simpleSET_SCREENaction.GameProvidermakesstateanddispatchavailable to all descendants.useGameContextensures you only use the store inside the provider; it throws a clear error otherwise.
Wrap your application with the provider so every component can access the global store:
What this does:
GameProviderwraps the app, enabling any child to calluseGameContextoruseGameSelector.- The UI shows a simple confirmation message; we will add real screens 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.
