Angular の ngRx ストア

始める前に、ちょっとした裏話を。そのため、数週間前、私が取り組んでいた Angular プロジェクトには、他のいくつかのコンポーネントが使用できるように、データをそのままの状態で保持する必要があるという要件がありました。私の React の本能は、コンテキスト API の Angular バージョンを使用することを提案し、状態を管理し、データをそのままの状態に保つための 3 つの Angular 方法を導き出しました。

1. コンポーネントの状態: 共有データが最小限のシンプルなアプリケーションまたはコンポーネントの場合、Angular のコンポーネント プロパティとイベント バインディングを使用して、個々のコンポーネント内の状態を管理できます。複数のコンポーネント間でデータを共有する必要があったため、これは明らかに常識外でした。

2. サービスベースの状態管理: サービスを使用して、集中状態管理ソリューションを作成できます。ただし、このアプローチに従うと、アプリケーションのパフォーマンスとスケーラビリティに影響が生じます。

3. ngRx ストア: ngRx ストアは、集中状態管理機能を提供します。 NGRX は、RxJS オブザーバブルとアクションを使用して状態を管理します。

3 つのうち、ngRx Store が最適だと思われました。

ngRx ストアの実装:

ngRx の実装をより深く理解するには、まず ngRx がそもそもどのように機能するかを理解する必要があります。

フローはコンポーネントから始まります。 ngRx の良い点は、コンポーネントが状態を管理する方法を知る必要がないことです。唯一懸念されるのは、ユーザーが削除ボタンをクリックしたなど、何かが起こったこと (イベント) を通知するアクションをディスパッチすることです。

この時点で減速機が登場します。 Reducer は、特定のアクションが状態をどのように変更するかを決定する役割を果たします。通常、状態を管理したいエンティティごとにリデューサーがあります。したがって、Reducer は、アプリ内でディスパッチされているすべてのアクションを検出し、状態を変更する方法を決定し、変更されると、更新された状態を ngRx ストア (アプリケーション全体のすべての状態のグローバル ストア) に保存します。

最後に、コンポーネントがストアにアクセスする場合、コンポーネントはセレクターを使用して、必要な状態をストアから取得します。

それでは、実際に (実際には私が) 手を動かして、Todo アプリケーションのストアを実装してみましょう。

ステップ 1: アクションの作成

createAction メソッド内で、アクションを区別するために使用される一意の文字列と、送信するペイロード (オプション) の 2 つのパラメータを渡します。

ステップ 2: レデューサーの作成
リデューサーでは、初期状態と、特定のアクションのディスパッチ時に実行するタスクを渡します。

ステップ 3: アクションのディスパッチ
アクションを渡すストアのディスパッチ メソッドを呼び出してアクションをディスパッチします。

ステップ 4: セレクターの作成

AppState は、todo 状態を選択するアプリケーション全体の中央ストアを指します。これで、ディスパッチ アクション コードの行番号 2 で行ったように、ストア データの利用を開始できるようになりました。 11.

最後に、アプリケーション全体で利用できるように、App Module のインポートに todoReducer を追加する必要があります。

結論

このブログでは、ngRx ストアの詳細、その仕組み、アプリケーションでの実装方法について要約して説明しました。 ngRx ストアは、アプリケーションが成長するにつれて、データを保存し、さまざまなコンポーネント間でデータにアクセスするために非常に役立ちます。 お役に立てば幸いです ;)

以上がAngular の ngRx ストアの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。