Как работает управление состоянием с NgRx?

Question

Accepted Answer

**NgRx** — это вдохновленная Redux библиотека для управления состоянием в Angular. Она централизует состояние приложения в единое неизменяемое **store** с строгим, предсказуемым однонаправленным потоком данных, построенным на RxJS. ## Основные компоненты и поток ```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 — описывают, что произошло ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — чистая функция, которая вычисляет следующее состояние ```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 являются **чистыми** — при наличии текущего состояния и действия они возвращают совершенно новый объект состояния (неизменяемо), никогда не изменяя старый. ## Effects — обрабатывают побочные эффекты (HTTP и т. д.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` Effects прослушивают действия, выполняют асинхронную работу (как HTTP) и отправляют результирующие действия — держат побочные эффекты отдельно от компонентов и 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

``` ## Когда 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 ``` (Примечание: NgRx также предлагает более легкие **SignalStore** и **ComponentStore** для уменьшения boilerplate.) ## Почему это важно NgRx привносит предсказуемое, централизованное, однонаправленное управление состоянием Redux в Angular — ценное для больших приложений, где много компонентов совместно используют сложное состояние, и где строгая отслеживаемость и отладка имеют значение. Но это сопровождается значительным boilerplate, поэтому ключевое решение — *когда* его использовать (большое/сложное общее состояние) в сравнении с более простыми подходами (сервисы с signals или `BehaviorSubject`) для меньших приложений. Понимание потока action→reducer→store→selector и effects для побочных эффектов — это основное требование для работы с кодовыми базами NgRx.