Kako deluje upravljanje stanja s pomočjo NgRx?

Question

Accepted Answer

**NgRx** je Redux-inšpirirana knjižnica za upravljanje stanja v Angular-ju. Centralizira stanje aplikacije v enem nespremenljivem **store**, s strogim, napovedljivim, enosmernim tokom podatkov, zgrajenem na RxJS. ## Osnovni gradniki in tok ```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) ``` ## Akcije — opisujejo, kaj se je zgodilo ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — čista funkcija, ki izračuna naslednje stanje ```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 })), ); ``` Reducerji so **čisti** — pri danem trenutnem stanju in akciji vrnejo povsem novo objekt stanja (nespremenljivo), nikoli ne spremenijo starega. ## Efekti — obravnavajo stranske učinke (HTTP, itd.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Efekti poslušajo akcije, izvajajo asinkrono delo (npr. HTTP), in razpošiljajo akcije rezultatov — ohranjajo stranske učinke izven komponent in reducerjev. ## Selektorji + uporaba komponent ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Kdaj je NgRx vredno? ```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 ``` (Opomba: NgRx ponuja tudi bolj lahkotno **SignalStore** in **ComponentStore** za manj standardnega koda.) ## Zakaj je to pomembno NgRx prinaša Reduxovo napovedljivo, centralizirano, enossmerno upravljanje stanja v Angular — dragoceno za velike aplikacije, kjer številne komponente delijo kompleksno stanje, in kjer sta stroga sledljivost in razhroščevanje pomembna. A prinaša precejšnjo količino standardnega koda, zato je ključna presoja *kdaj* ga uporabiti (veliko/kompleksno skupno stanje) v primerjavi s preprostejšimi pristopi (storitve s signali ali `BehaviorSubject`) za manjše aplikacije. Razumevanje toka akcija→reducer→store→selektor in efekti za stranske učinke je temeljno za delo v NgRx bazah kode.