Jak funguje správa stavů s NgRx?

Question

Accepted Answer

**NgRx** je Redux-inspirovaná knihovna pro správu stavů pro Angular. Centralizuje stav aplikace v jediném neměnném **store** s přísným, předvídatelným a jednosměrným tokem dat postaveným na RxJS. ## Základní součásti a 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) ``` ## Akce — popisují, co se stalo ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reduktor — čistá funkce, která vypočítá další stav ```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 })), ); ``` Reduktory jsou **čisté** — mají-li aktuální stav a akci, vrátí zupilně nový objekt stavu (neměnně), nikdy nemutují ten starý. ## Efekty — zpracovávají vedlejší efekty (HTTP, atd.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Efekty poslouchají akce, provádějí asynchronní práci (jako HTTP) a odesílají akce výsledků — udržují vedlejší efekty mimo komponenty a redaktory. ## Selektory + použití komponenty ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Kdy je NgRx v pořádku? ```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 ``` (Poznámka: NgRx také nabízí lehčí **SignalStore** a **ComponentStore** s menším množstvím standardního kódu.) ## Proč je to důležité NgRx přináší do Angular předvídatelnou, centralizovanou, jednosměrnou správu stavů Redux — cennné pro velké aplikace, kde mnoho komponent sdílí složitý stav a kde je důležitá přísná trasovatelnost a ladění. Ale přichází se značným množstvím standardního kódu, takže klíčovým úsudkem je, *kdy* jej používat (velký/složitý sdílený stav) versus jednodušší přístupy (služby se signály nebo `BehaviorSubject`) pro menší aplikace. Rozdělení toku akce→reduktor→store→selektor a efekty pro vedlejší efekty je jádrem práce v kódech NgRx.