Jak działa zarządzanie stanem z NgRx?

Question

Accepted Answer

**NgRx** to inspirowana Redux biblioteką do zarządzania stanem dla Angular. Centralizuje stan aplikacji w jednym niezmiennym **store**, z ścisłym, przewidywalnym, jednokierunkowym przepływem danych zbudowanym na RxJS. ## Podstawowe elementy i przepływ ```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 — opisują, co się stało ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — czysta funkcja obliczająca następny stan ```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 są **czyste** — otrzymując bieżący stan i akcję, zwracają zupełnie nowy obiekt stanu (niezmiennie), nigdy nie mutując starego. ## Effects — obsługują efekty uboczne (HTTP, itp.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects nasłuchują akcji, wykonują pracę asynchroniczną (taką jak HTTP) i wysyłają akcje wynikowe — utrzymując efekty uboczne poza komponentami i reducerami. ## Selectors + component usage ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Kiedy NgRx warto używać? ```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 ``` (Uwaga: NgRx oferuje również lżejsze **SignalStore** i **ComponentStore** dla mniejszej ilości boilerplate'u.) ## Dlaczego to ważne NgRx przynosi przewidywalne, scentralizowane, jednokierunkowe zarządzanie stanem Redux do Angular — cenne dla dużych aplikacji, gdzie wiele komponentów udostępnia złożony stan, i gdzie ścisła śledzalność i debugowanie są ważne. Ale wiąże się ze znacznym boilerplate'em, więc kluczową decyzją jest *kiedy* go używać (duży/złożony wspólny stan) w stosunku do prostszych podejść (serwisy z signals lub `BehaviorSubject`) dla mniejszych aplikacji. Zrozumienie przepływu action→reducer→store→selector i effects obsługujących efekty uboczne jest kluczowe dla pracy w bazach kodu NgRx.