Hur fungerar tillståndshantering med NgRx?

Question

Accepted Answer

**NgRx** är ett Redux-inspirerat tillståndshanteringbibliotek för Angular. Det centraliserar programtillståndet i en enda oföränderlig **store**, med ett strikt, förutsägbart, enriktad dataflöde byggt på RxJS. ## Huvuddelarna och flödet ```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 — beskriver vad som hände ```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 som beräknar nästa tillstånd ```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 är **rena** — givet det aktuella tillståndet och en åtgärd returnerar de ett helt nytt tillståndsobjekt (oförändrat), muterar aldrig det gamla. ## Effects — hanterar bieffekter (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 lyssnar efter åtgärder, utför asynkront arbete (som HTTP), och skickar resultatåtgärder — håller bieffekter borta från komponenter och reducers. ## Selectors + komponentanvändning ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## När är NgRx värt det? ```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 ``` (Notering: NgRx erbjuder också en lättare **SignalStore** och **ComponentStore** för mindre boilerplate.) ## Varför det är viktigt NgRx för Redux förutsägbara, centraliserade, enriktade tillståndshantering till Angular — värdefullt för stora appar där många komponenter delar komplext tillstånd, och där strikt spårbarhet och debugging är viktigt. Men det kommer med betydande boilerplate, så nyckeldomstolen är *när* man använder det (stort/komplext delat tillstånd) kontra enklare tillvägagångssätt (tjänster med signaler eller `BehaviorSubject`) för mindre appar. Att förstå flödet action→reducer→store→selector och effects för bieffekter är centralt för att arbeta i NgRx-kodbaser.