Kaip veikia būsenos vadyba su NgRx?

Question

Accepted Answer

**NgRx** yra inspiruota Redux būsenos valdymo biblioteka Angular. Ji sukoncentruoja programos būseną viename nepakeičiamame **store**, su griežtu, numatymu, vienpusiu duomenų srautu, pagrįstu RxJS. ## Pagrindiniai komponentai ir srautas ```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 — aprašyti, kas atsitiko ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — gryna funkcija, kuri apskaičiuoja kita būseną ```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 })), ); ``` Reducery yra **grynos** — duota dabartinė būsena ir veiksmas, jie grąžina visai naują būsenos objektą (nelinčius), jų niekada nekeičia senąjį. ## Effects — tvarkyti šalutinius efektus (HTTP ir kt.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects klausosi veiksmų, atlieka asinchroninį darbą (pvz., HTTP) ir išsiunčia rezultato veiksmus — laikydami šalutinius efektus atokiau nuo komponentų ir reducerių. ## Selectors + komponento naudojimas ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Kada NgRx verta? ```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 ``` (Pastaba: NgRx taip pat siūlo lengvesnę **SignalStore** ir **ComponentStore** su mažiau patelkenio.) ## Kodėl tai svarbu NgRx į Angular atneša Redux numatymo, sukoncentruoto, vienpusio būsenos valdymo — brangios didelėms programoms, kuriose daug komponentų dalijasi sudėtinga būsena, ir kai griežta sekamumas bei klaidos nustatymas yra svarbūs. Tačiau jis atneša reikšmingą patelkėnį, todėl pagrindinė nuosprendis yra *kada* jį naudoti (didelė/sudėtinga bendra būsena) lyginant su paprastesniais metodais (tarnybomis su signalais arba `BehaviorSubject`) mažesnėms programoms. Supratimas action→reducer→store→selector srauto ir effects šalutiems efektams yra esmingas darbas NgRx kodų bazėse.