How to use NgRx ComponentStore?
summary
ComponentStore is a tiny standalone state library (one file, 392 lines) that settles three needs: read via select/update/effect/updater, write via updaters, and side effects with explicit race control using concatMap/mergeMap/switchMap/exhaustMap. Four concrete use cases are demonstrated: singleton providedIn: 'root', reusable common component stores (paginator), local component state, and branch-level shared state. Example app uses Google Books API, shows searching, pagination (513 results example), and works end-to-end while keeping lifecycle and subscriptions tied to component providers.
AI-written summary · about
chapters (11)
- 0:00Introduction and survey
- 3:57What is ComponentStore
- 10:45Reading and writing state
- 12:13Handling side effects with effects
- 17:33Four use cases for ComponentStore
- 23:16Singleton state example
- 25:28Common component state example
- 28:41Local component state example
- 30:08Component branch state example
- 31:10State flow in the app
- 35:50Resources and closing
related talks
25mFilling the Gap in State with NgRx ComponentStore
51mAlex Okushko - Software Engineer at Google/Firebase | NGUPEx
31mNgRx SignalStore: The Ultimate Tool for Modern State Management
18mNgRx SignalStore: Modern State Management for Angular
35mClean React Global State Management Without Dependencies
31mUnlocking Reactive State Super Powers with NgRx Signal Store
17mCustom Features of NgRx SignalStore
23mState management with ngrx