How does state management with NgRx work?

Question

Accepted Answer

**NgRx** is a Redux-inspired state-management library for Angular. It centralizes application state in a single immutable **store**, with a strict, predictable, unidirectional data flow built on RxJS. ## The core pieces and flow ```text Component dispatches an ACTION → REDUCER produces new state (pure function) → STORE updates → SELECTORS read state → Component re-renders (EFFECTS handle side effects like HTTP, dispatching new actions) ``` ## Actions — describe what happened ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — pure function that computes the next state ```ts import { createReducer, on } from "@ngrx/store"; export const usersReducer = createReducer( initialState, on(loadUsers, state => ({ ...state, loading: true })), on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })), ); ``` Reducers are **pure** — given the current state and an action, they return a brand-new state object (immutably), never mutating the old one. ## Effects — handle side effects (HTTP, etc.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects listen for actions, perform async work (like HTTP), and dispatch result actions — keeping side effects out of components and reducers. ## Selectors + component usage ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## When is NgRx worth it? ```text ✓ Large apps with lots of shared state across many components ✓ Complex state interactions, need for time-travel debugging / strict predictability ✗ Small/medium apps → it's heavy boilerplate; a service + signals/BehaviorSubject is simpler ``` (Note: NgRx also offers a lighter **SignalStore** and **ComponentStore** for less boilerplate.) ## Why it matters NgRx brings Redux's predictable, centralized, unidirectional state management to Angular — valuable for large apps where many components share complex state, and where strict traceability and debugging matter. But it carries significant boilerplate, so the key judgment is *when* to use it (large/complex shared state) versus simpler approaches (services with signals or `BehaviorSubject`) for smaller apps. Understanding the action→reducer→store→selector flow and effects for side effects is core to working in NgRx codebases.