NgRx — Reactive State Management for Angular

Introduction

NgRx is the standard reactive state management solution for Angular applications. It implements the Redux pattern using RxJS Observables, providing a predictable unidirectional data flow with actions, reducers, selectors, and effects. NgRx integrates deeply with Angular's dependency injection and change detection systems.

What NgRx Does

• Manages global application state through a single immutable store
• Handles side effects like HTTP calls and timers via the Effects module
• Provides memoized selectors for efficient derived state computation
• Manages entity collections with the Entity adapter for CRUD operations
• Offers router state integration and developer tools for time-travel debugging

Architecture Overview

NgRx follows the Redux pattern adapted for Angular and RxJS. Components dispatch actions, which are processed by reducers to produce new state. Selectors derive slices of state as Observables that components subscribe to. Effects listen for specific actions and orchestrate side effects, dispatching new actions when async operations complete. The entire flow is observable-based and integrates with Angular change detection.

Self-Hosting & Configuration

• Install packages via ng add or npm for Store, Effects, Entity, and DevTools
• Register the store in your root module with StoreModule.forRoot()
• Add feature state lazily with StoreModule.forFeature() in feature modules
• Enable Redux DevTools integration with StoreDevtoolsModule
• Configure Effects with EffectsModule.forRoot() and forFeature()

Key Features

• Predictable state with immutable updates and pure reducer functions
• RxJS-powered effects for managing async operations and side effects
• Memoized selectors that recompute only when inputs change
• Entity adapter for normalized collection management with CRUD helpers
• Component Store for local component-level state management

Comparison with Similar Tools

• Redux Toolkit — React-focused with similar patterns; NgRx is Angular-native
• Akita — simpler Angular state management with less boilerplate
• NGXS — class-based Angular state management with decorators
• Angular Signals — built-in fine-grained reactivity, lighter than full NgRx for simple cases

FAQ

Q: When should I use NgRx versus Angular Signals? A: Use NgRx for complex applications with shared state, side effects, and need for time-travel debugging. Signals work well for simpler local state.

Q: Does NgRx add too much boilerplate? A: NgRx introduced createFeature and createActionGroup to reduce boilerplate. Component Store offers a lighter alternative for local state.

Q: Can NgRx be adopted incrementally? A: Yes. Start with Component Store for local state, then add global Store and Effects as complexity grows.

Q: Is NgRx compatible with Angular standalone components? A: Yes. NgRx supports Angular's standalone API with provideStore() and provideEffects() functions.

Sources

• https://github.com/ngrx/platform
• https://ngrx.io/