NgRx を使った状態管理はどのように機能しますか？

Question

Accepted Answer

**NgRx** は Angular 用の Redux にインスパイアされた状態管理ライブラリです。アプリケーションの状態を単一の不変な **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 })), ); ``` Reducer は **純粋** です — 現在の状態と action が与えられると、新しい状態オブジェクトを返す（イミュータブルに）ため、古いオブジェクトを決して変更しません。 ## 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 は action をリッスンし、非同期処理（HTTP など）を実行し、結果 action をディスパッチします — 副作用をコンポーネントと reducer の外に保ちます。 ## Selectors + コンポーネントの使用 ```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** も提供しています。） ## なぜ重要なのか NgRx は Redux の予測可能で集約化された単方向の状態管理を Angular にもたらします — 多くのコンポーネントが複雑な状態を共有する大規模なアプリケーションや、厳密な追跡とデバッグが重要な場合に価値があります。ただし大量のボイラープレートが必要になるため、重要な判断は*いつ*それを使うか（大規模/複雑な共有状態）、小規模なアプリケーションではシンプルなアプローチ（signals や `BehaviorSubject` を使用したサービス）を使うかです。 action→reducer→store→selector フローと副作用のための effects を理解することは、NgRx コードベースで働く際の基本です。