Como funciona o gerenciamento de estado com NgRx?

Question

Accepted Answer

**NgRx** é uma biblioteca de gerenciamento de estado inspirada no Redux para Angular. Centraliza o estado da aplicação em um único **store** imutável, com um fluxo de dados estrito, previsível e unidirecional construído sobre RxJS. ## As peças centrais e o fluxo ```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 — descrevem o que aconteceu ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — função pura que calcula o próximo estado ```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 são **puros** — dado o estado atual e uma ação, eles retornam um objeto de estado completamente novo (imutavelmente), nunca mutando o antigo. ## Effects — tratam efeitos colaterais (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 ouvem ações, realizam trabalho assíncrono (como HTTP) e despacham ações de resultado — mantendo efeitos colaterais fora de componentes e reducers. ## 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

``` ## Quando NgRx vale a pena? ```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 também oferece **SignalStore** e **ComponentStore** mais leves para menos boilerplate.) ## Por que isso importa NgRx traz o gerenciamento de estado previsível, centralizado e unidirecional do Redux para Angular — valioso para aplicações grandes onde muitos componentes compartilham estado complexo, e onde a rastreabilidade rigorosa e a depuração são importantes. Mas traz consigo boilerplate significativo, portanto a decisão-chave é *quando* usá-lo (estado compartilhado grande/complexo) versus abordagens mais simples (serviços com signals ou `BehaviorSubject`) para aplicações menores. Entender o fluxo action→reducer→store→selector e effects para efeitos colaterais é essencial para trabalhar em bases de código NgRx.