Hoe werkt state management met NgRx?

Question

Accepted Answer

**NgRx** is een door Redux geïnspireerde state-management library voor Angular. Het centraliseert de applicatiestatus in een enkele onveranderbare **store**, met een strikte, voorspelbare, unidirectionele gegevensstroom gebouwd op 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 — beschrijven wat er is gebeurd ```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 functie die de volgende state berekent ```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 zijn **pure** — gegeven de huidige state en een action, retourneren ze een gloednieuw state object (onveranderbaar), nooit de oude muterend. ## Effects — verwerken side effects (HTTP, enz.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects luisteren naar actions, voeren async werk uit (zoals HTTP), en dispatchen resultaatactions — side effects uit componenten en reducers houden. ## 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

``` ## Wanneer is NgRx het waard? ```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 ``` (Opmerking: NgRx biedt ook een lichter **SignalStore** en **ComponentStore** voor minder boilerplate.) ## Waarom het belangrijk is NgRx brengt de voorspelbare, gecentraliseerde, unidirectionele state management van Redux naar Angular — waardevol voor grote apps waar veel componenten complexe state delen, en waar strikte traceerbaarheid en debugging van belang zijn. Maar het brengt aanzienlijke boilerplate met zich mee, dus de sleutelbeslissing is *wanneer* dit te gebruiken (groot/complex gedeelde state) versus eenvoudigere benaderingen (services met signals of `BehaviorSubject`) voor kleinere apps. Het begrijpen van de action→reducer→store→selector flow en effects voor side effects is essentieel voor het werken in NgRx codebases.