NgRx est une bibliothèque de gestion d'état inspirée de Redux pour Angular. Elle centralise l'état de l'application dans un unique store immuable, avec un flux de données stricte, prévisible et unidirectionnel construit sur RxJS.
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)
import { createAction, props } from "@ngrx/store";
export const loadUsers = createAction("[Users] Load");
export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>());
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 })),
);
Les reducers sont purs — étant donné l'état actuel et une action, ils retournent un nouvel objet d'état (de manière immuable), sans jamais muter l'ancien.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Les effects écoutent les actions, effectuent du travail asynchrone (comme HTTP) et distribuent des actions de résultat — gardant les effets secondaires hors des composants et des reducers.
export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized
// component
users$ = this.store.select(selectUsers);
load() { this.store.dispatch(loadUsers()); }
<li *ngFor="let u of users$ | async">{{ u.name }}</li>
✓ 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
(Remarque : NgRx offre également un SignalStore et un ComponentStore plus légers pour moins de boilerplate.)
NgRx apporte la gestion d'état prévisible, centralisée et unidirectionnelle de Redux à Angular — précieuse pour les grandes applications où de nombreux composants partagent un état complexe, et où la traçabilité stricte et le débogage importent.
Mais elle s'accompagne d'un boilerplate significatif, donc le jugement clé est quand l'utiliser (grand/état partagé complexe) par rapport aux approches plus simples (services avec signals ou BehaviorSubject) pour les petites applications.
Comprendre le flux action→reducer→store→selector et les effects pour les effets secondaires est essentiel pour travailler dans les bases de code NgRx.