Hogyan működik az NgRx-szel az állapotkezelés?

Question

Accepted Answer

Az **NgRx** egy Redux-inspirált állapotkezelési könyvtár az Angular számára. Központosítja az alkalmazás állapotát egyetlen megváltoztathatatlan **store**-ban, RxJS-re épített szigorú, kiszámítható, egyirányú adatárammal. ## Az alapvető komponensek és az áramlás ```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) ``` ## Akciók — leírják, hogy mi történt ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — tiszta függvény, amely a következő állapotot számítja ki ```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 })), ); ``` A reducers **tiszták** — az aktuális állapot és egy akció alapján egy vadonatúj állapotobjektumot adnak vissza (megváltoztathatóan), soha nem módosítják a régit. ## Effektek — kezelik a mellékhatásokat (HTTP, stb.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Az effektek hallgatják az akciókat, végrehajtanak aszinkron munkát (mint a HTTP) és diszpecserizálják az eredmény akciókat — az komponenseken és reducerekből kívül tartják a mellékhatásokat. ## Selectorok + komponenshasználat ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Mikor érdemes az NgRx? ```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 ``` (Megjegyzés: Az NgRx könnyebb **SignalStore** és **ComponentStore** is kínál kevesebb boilerplate-ért.) ## Miért fontos Az NgRx a Redux kiszámítható, központosított, egyirányú állapotkezelését hozza az Angular-ba — értékes nagyobb alkalmazások számára, ahol számos komponens összetett állapotot osztozik meg, és ahol a szigorú nyomkövetés és a hibakeresés fontos. De jelentős mennyiségű boilerplate-tel jár, ezért a kulcskérdés, hogy *mikor* érdemes használni (nagy/összetett megosztott állapot) versus egyszerűbb megközelítések (signalokkal vagy `BehaviorSubject`-tel rendelkező szolgáltatások) a kisebb alkalmazások számára. Az akció→reducer→store→selektor áramlás és az effekták a mellékhatásokhoz való megértése alapvetô az NgRx codebase-kban való munkához.