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.
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)
import { createAction, props } from "@ngrx/store";
export const loadUsers = createAction("[Users] Load");
export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>());
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.
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.
export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized
// component
users$ = this.store.select(selectUsers);
load() { this.store.dispatch(loadUsers()); }
<li *ngFor="let u of users$ | async">{{ u.name }}</li>
✓ 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.)
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.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona