A deep-dive into managing multiple independent instances of the same NgRx state slice in Angular, using a tab-like counter interface as the example. The post iterates through several approaches: lifting state to NgRx store, syncing router state via NgRx Router Store with a custom serializer, and three strategies for making actions context-aware (Content Enricher Effect, meta-reducers, and container components). It also covers restricting tab count via route guards vs. reducers, closing tabs without re-initializing state, and best practices around smart/dumb components, Good Action Hygiene, and keeping state logic centralized in reducers.

19m read timeFrom timdeschryver.dev
Post cover image
Table of contents
The problemA solution with NgRxRestricting the number of countersClosing a tabMoving things aroundConclusion
5 Impressions