ngrx

@ngrx/store、@ngrx/effects、@ngrx/entity、@ngrx/signals

バージョン： 19.0.0（2025） タグ： 状態管理、Redux、リアクティブ、ストア、エフェクト

参考資料： ドキュメント — ガイド、API • GitHub • GitHub のイシュー

API の変更点

このセクションでは、最近のバージョン固有の API の変更について説明します。

• 新機能：NgRx Signal Store — Signals API を使用した最新の軽量な状態管理で、ボイラープレートを大幅に削減します 出典

• 新機能：関数型エフェクト — 関数型プログラミングのパターンを使用してエフェクトを作成する最新の方法です

• 新機能：withEntities — Signal Store のエンティティ管理機能で、コレクションに対する CRUD 操作を簡素化します

• 新機能：@ngrx/data — HTTP との自動連携により、エンティティの CRUD 操作を簡素化します

• 非推奨：従来の NgRx パターン — 新規プロジェクトでは Signal Store への移行を検討してください

ベストプラクティス

• 新規プロジェクトでは NgRx Signal Store を使用します — NgRx の構造と Signals のパフォーマンスを組み合わせています

import { signalStore, withState, withMethods, withHooks } from '@ngrx/signals';

export const AuthStore = signalStore(
  withState({ user: null, isAuthenticated: false }),
  withMethods((store, authService = inject(AuthService)) => ({
    login(credentials: Credentials) {
      authService.login(credentials).pipe(
        tap(user => store.user.set(user))
      ).subscribe();
    }
  })),
  withHooks({
    onInit() {
      // Initialize store
    }
  })
);

• コレクションには Entity Adapter を使用します — エンティティコレクションに対する CRUD 操作を簡素化します

import { createEntityAdapter, EntityState } from '@ngrx/entity';

export interface Product extends EntityState<Product> {
  // Additional state properties
}

export const adapter = createEntityAdapter<Product>({
  selectId: (product) => product.id
});

• リデューサーは純粋かつ同期的に保ちます — リデューサー内で非同期処理を実行しないでください

• 副作用には Effects を使用します — HTTP 呼び出し、ナビゲーション、その他の非同期処理をエフェクトで処理します

• アクションには強い型付けを使用します — 型安全性を高めるためにアクショングループを作成します

• 複雑なデータでは状態を正規化します — エンティティを ID をキーとする辞書に格納します

• メモ化されたセレクターを使用します — 不要な再計算を防ぎます

• ChangeDetectionStrategy.OnPush を使用します — リアクティブな状態と相性がよいです