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.
Table of contents
The problemA solution with NgRxRestricting the number of countersClosing a tabMoving things aroundConclusion5 Impressions