Lesson 23 — Store with reducer + context

A tiny store of your own

A store is one place that holds app-wide state and the actions that change it. Build it from three parts: a Provider component that owns useReducer and shares it through context, a reducer with the rules, and a custom hook (useStore) so components never touch the context directly. The hook can also throw a clear error when it is used outside the Provider.

function useStore() {
  const ctx = useContext(StoreContext);
  if (!ctx) throw new Error("useStore must be used inside StoreProvider");
  return ctx;
}

Why it matters: this is Redux-style state management with no library, and it is how many real apps start.