Hvordan fungerer statsstyring med NgRx?

Question

Accepted Answer

**NgRx** er et Redux-inspireret state-management-bibliotek til Angular. Det centraliserer applikationstilstand i en enkelt uforanderlig **store** med et strengt, forudsigeligt, ensrettet dataflow bygget på RxJS. ## Kernestykker og 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) ``` ## Handlinger — beskriver hvad der skete ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — ren funktion, der beregner næste tilstand ```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 er **rene** — givet den aktuelle tilstand og en handling, returnerer de et helt nyt tilstandsobjekt (uforanderligt), muterer aldrig det gamle. ## Effekter — håndterer bivirkninger (HTTP osv.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effekter lytter efter handlinger, udfører async-arbejde (som HTTP) og sender resultat-handlinger — holder bivirkninger uden for komponenter og reducers. ## Selektorer + komponentbrug ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Hvornår er NgRx det værd? ```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 ``` (Bemærk: NgRx tilbyder også et lettere **SignalStore** og **ComponentStore** for mindre boilerplate.) ## Hvorfor er det vigtigt NgRx bringer Redux's forudsigelige, centraliserede, ensrettede statsstyring til Angular — værdifuldt for store apps, hvor mange komponenter deler kompleks tilstand, og hvor streng sporbarhed og debugging betyder noget. Men det medfører betydelig boilerplate, så nøglevurderingen er *hvornår* man skal bruge det (stor/kompleks delt tilstand) versus simplere tilgange (tjenester med signaler eller `BehaviorSubject`) til mindre apps. At forstå handlings→reducer→store→selector-flowet og effekter for bivirkninger er kernestoffet i NgRx-kodebaser.