Come funziona la gestione dello stato con NgRx?

Question

Accepted Answer

**NgRx** è una libreria di gestione dello stato ispirata a Redux per Angular. Centralizza lo stato dell'applicazione in un singolo **store** immutabile, con un flusso dati rigoroso, prevedibile e unidirezionale basato su RxJS. ## I componenti principali e il flusso ```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 — descrivono cosa è successo ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — funzione pura che calcola lo stato successivo ```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 })), ); ``` I reducer sono **puri** — dato lo stato corrente e un'action, restituiscono un nuovo oggetto stato (immutabilmente), senza mai mutare quello vecchio. ## Effects — gestiscono gli effetti collaterali (HTTP, ecc.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Gli effects ascoltano le actions, eseguono lavori asincroni (come HTTP) e dispatchano actions di risultato — mantenendo gli effetti collaterali fuori dai componenti e dai reducer. ## Selectors + utilizzo dei componenti ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Quando vale la pena usare 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 ``` (Nota: NgRx offre anche una versione più leggera **SignalStore** e **ComponentStore** con meno boilerplate.) ## Perché è importante NgRx porta la gestione dello stato prevedibile, centralizzata e unidirezionale di Redux in Angular — prezioso per app di grandi dimensioni dove molti componenti condividono uno stato complesso, e dove la tracciabilità rigorosa e il debug sono importanti. Ma comporta significativo boilerplate, quindi il giudizio cruciale è *quando* usarlo (stato condiviso grande/complesso) rispetto a approcci più semplici (servizi con signals o `BehaviorSubject`) per app più piccole. Comprendere il flusso action→reducer→store→selector e gli effects per gli effetti collaterali è fondamentale per lavorare in codebase NgRx.