State essentials

315 minutes across 16 steps. Where a value belongs, why server state is not client state, and the mechanisms underneath every Redux-family store.

State essentials 0 of 0 done (0%)

1. Mark state/state done state/state reading
2. Mark state/store done state/store reading
3. Mark state/actions done state/actions reading
4. Mark state/reducer done state/reducer reading
5. Mark state/selectors done state/selectors reading
6. Mark state/middleware done state/middleware reading
7. Mark state/ajax done state/ajax reading
8. Mark state/crud done state/crud reading
9. Mark action-creators done Implement Redux-style action creators coding · easy · 15 min
10. Mark counter-reducer done Implement a Redux-style reducer with immutability coding · medium · 20 min
11. Mark middleware-order done What order does middleware run in? quiz · medium · 10 min
12. Mark selector-memoization done Selector Memoization Basics quiz · medium · 10 min
13. Mark memoized-selector done Memoize a derived selector coding · medium · 25 min
14. Mark normalize-entities done Normalise a nested API response coding · hard · 35 min

    The one that makes every later screen cheaper.

15. Mark offline-first-list done Design an offline-first task list system-design · medium · 35 min

    Design round: writes without a network.

16. Mark harness-state-shape done Guardrail a store's shape harness · hard · 50 min

    Encode 'well shaped' as a script and watch what an agent does to it.

Most state management problems are placement problems, not library problems. A value ended up somewhere that cannot see what it needs, or somewhere too much of the application can reach — and then every library makes the symptom worse in its own idiom.

So this plan is deliberately light on any one library. The readings cover the mechanisms — store, actions, reducers, selectors, middleware — and the questions make you build each one by hand, because the shape is identical whether you spell it Redux, NgRx or Pinia.

The last three steps are the ones worth the time: normalisation, which makes every later screen cheaper; an offline design round, where the state layer has to survive without a network; and a harness exercise that turns “well shaped” into something a script can reject.