Cum funcționează gestionarea stării cu NgRx?

Question

Accepted Answer

**NgRx** este o bibliotecă de gestionare a stării inspirată de Redux pentru Angular. Centralizează starea aplicației într-un singur **store** imuabil, cu un flux de date strict, previzibil și unidirecțional construit pe RxJS. ## Piesele de bază și fluxul ```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 — descriu ce s-a întâmplat ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — funcție pură care calculează starea următoare ```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 })), ); ``` Reducers sunt **pure** — dată starea curentă și o acțiune, returnează un obiect de stare complet nou (imuabil), niciodată mutând cel vechi. ## Effects — gestionează efectele secundare (HTTP, etc.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects ascultă acțiuni, efectuează muncă asincronă (cum ar fi HTTP) și expedează acțiuni de rezultat — ținând efectele secundare în afara componentelor și reducerilor. ## 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

``` ## Când merită 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 ``` (Notă: NgRx oferă, de asemenea, un **SignalStore** și **ComponentStore** mai ușoare pentru mai puțin boilerplate.) ## De ce este important NgRx aduce gestionarea stării previzibilă, centralizată și unidirecțională din Redux la Angular — valoroasă pentru aplicațiile mari unde multe componente au aceeași stare complexă, și unde urmăribilitatea riguroasă și depanarea sunt importante. Dar vine cu boilerplate semnificativ, deci decizia cheie este *când* să o utilizezi (stare comună mare/complexă) versus abordări mai simple (servicii cu signals sau `BehaviorSubject`) pentru aplicații mai mici. Înțelegerea fluxului action→reducer→store→selector și effects pentru efectele secundare este esențială pentru a lucra în bazele de coduri NgRx.