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.
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 })),
);
Reducers zijn pure — gegeven de huidige state en een action, retourneren ze een gloednieuw state object (onveranderbaar), nooit de oude muterend.
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.
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
(Opmerking: NgRx biedt ook een lichter SignalStore en ComponentStore voor minder boilerplate.)
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.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren