夏、私はお気に入りの場所を処理する小さなアプリケーションを構築して、NgRx スキルをリフレッシュしました。そのプロセス中、アプリの状態を実際に制御できたので、NgRx を楽しめました。
多くのノイズを引き起こしたことの 1 つは、CRUD 操作に定義するセレクターとアクションの数でした。私の個人的なプロジェクトでは、それほど問題はありませんでしたが、多くのスライスやセクション、セレクターやリデューサーを含む大規模なアプリケーションを構築する場合、コードの保守が難しくなりました。
たとえば、成功、エラー、更新、削除のアクションと各操作のセレクターを記述すると、複雑さが増し、より多くのテストが必要になります。
そこで、NgRx Entities の出番です。NgRx Entities は定型コードを削減し、テストを簡素化し、配信時間を短縮し、コードベースをより保守しやすく保ちます。この記事では、NgRx Entities を使用してプロジェクト内の場所の状態管理をリファクタリングし、CRUD ロジックを簡素化する方法を説明します。
コードに入る前に、まず NgRx エンティティ とは何か、そしてなぜそれらの使用を検討する必要があるのかを理解しましょう。
NgRx Entities は、データ収集の操作を簡素化する NgRx の拡張機能です。これは、状態に対するエンティティの追加、更新、削除や、ストアからのエンティティの選択などの操作を簡単に実行できる一連のユーティリティを提供します。
コレクションの CRUD オペレーションを構築する場合、リデューサーにメソッドを手動で記述したり、オペレーションごとに繰り返しセレクターを作成したりするのは面倒で、エラーが発生しやすい可能性があります。 NgRx Entities は、この責任の多くを軽減し、作成および保守する必要があるコードの量を削減します。 NgRx Entities はボイラープレート コードを最小限に抑えることで、技術的負債を削減し、大規模なアプリケーションの状態管理を簡素化します。
NgRx Entities は、コレクションの操作を効率化するための EntityState、EntityAdapter、定義済みセレクター などのツールを提供します。
EntityState インターフェイスは NgRx Entities のコアです。 2 つの主要なプロパティを使用してエンティティのコレクションを保存します:
ids: エンティティ ID の配列。
エンティティ: 各エンティティが ID ごとに保存される辞書。
interface EntityState<V> {
ids: string[] | number[];
entities: { [id: string | id: number]: V };
}
エンティティの状態について詳しく読む
EntityAdapter は、createEntityAdapter 関数を使用して作成されます。エンティティの追加、更新、削除など、状態内のエンティティを管理するための多くのヘルパー メソッドを提供します。さらに、エンティティの識別方法と並べ替え方法を構成できます。
interface EntityState<V> {
ids: string[] | number[];
entities: { [id: string | id: number]: V };
}
EntityAdapter を使用すると、エンティティの識別方法 (selectId) と、sortComparer を使用してコレクションを並べ替える方法を定義することもできます。
EntityAdapter について詳しく読む
基本を理解したので、NgRx Entities
を使用してアプリケーション内の場所の状態管理をリファクタリングする方法を見てみましょう。まず、前の記事からリポジトリのクローンを作成し、基本的な CRUD セットアップがあるブランチに切り替えます。
export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();
?この記事は、NgRx の学習に関する私のシリーズの一部です。フォローしたい方はぜひチェックしてみてください。
https://www.danywalls.com/ Understanding-when-and-why-to-implement-ngrx-in-angular
https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools
https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx
https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular
https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-c rud-with-ngrx
https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store
このブランチには、NgRx がすでにインストールされており、MockAPI.io が API 呼び出し用に構成されているセットアップが含まれています。
私たちの目標は、NgRx エンティティを使用して場所を管理し、リファクタリング動作イオンを CRUD 操作に使用し、更新 することです。場所の追加、更新、削除などのアダプター操作を使用して簡素化するには、reducer、ストアから場所のリストを取得するには、セレクターを使用します。
まず、npm i を使用してプロジェクトの依存関係をインストールし、ng add @ngrx/entity を実行してスケマティックを使用して NgRx エンティティを追加します。
git clone https://github.com/danywalls/start-with-ngrx.git git checkout crud-ngrx cd start-with-ngrx
完璧です。リファクタリングを開始する準備ができました!
プロジェクトの以前のバージョンでは、状態を管理するために配列とリデューサーを手動で定義しました。 NgRx Entities を使用すると、アダプターに収集ロジックを管理させます。
まず、places.state.ts を開き、PlacesState をリファクタリングして EntityState
npm i ng add @ngrx/entity
次に、createEntityAdapter を使用して、Place エンティティのエンティティ アダプターを初期化します。
interface EntityState<V> {
ids: string[] | number[];
entities: { [id: string | id: number]: V };
}
最後に、getInitialState:
を使用して、手動の初期状態をアダプターによって提供されるものに置き換えます。
export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();
EntityState を使用するように状態をリファクタリングし、場所のリストを自動的に処理するように EntityAdapter を初期化しました。
NgRx エンティティを使用するアクションを更新してみましょう。
前の記事では、エンティティの更新と変更を手動で処理しました。ここで、NgRx Entities を使用して、Update
places.actions.ts で、Update
git clone https://github.com/danywalls/start-with-ngrx.git git checkout crud-ngrx cd start-with-ngrx
完璧です。更新の処理を簡素化するために Update タイプを使用して、NgRx エンティティ で動作するようにアクションを更新しました。これがリデューサーにどのような影響を与えるかを確認し、場所の追加、更新、削除などの操作にエンティティ アダプター メソッドを使用するようにリファクタリングします。
Reducer は、NgRx Entities が真価を発揮する場所です。場所を追加、更新、削除するための手動ロジックを作成する代わりに、エンティティ アダプターによって提供されるメソッドを使用するようになりました。
リデューサーを簡素化する方法は次のとおりです:
npm i ng add @ngrx/entity
アダプターから addOne、updateOne、removeOne、setAll などのメソッドを使用して、状態内のエンティティを処理しました。
その他の便利な方法は次のとおりです。
addMany: 複数のエンティティを追加します。
removeMany: ID によって複数のエンティティを削除します。
upsertOne: エンティティの存在に基づいてエンティティを追加または更新します。
EntityAdapter のリデューサー メソッドの詳細を参照してください。
状態、アクション、およびリデューサーがリファクタリングされたので、NgRx Entities の事前定義されたセレクターを利用できるようにセレクターをリファクタリングします。
NgRx Entities は、ストアへのクエリを簡単にする一連の事前定義されたセレクターを提供します。 selectAll、selectEntities、selectIds などのセレクターをアダプターから直接使用します。
places.selectors.ts のセレクターをリファクタリングする方法は次のとおりです。
export type PlacesState = {
placeSelected: Place | undefined;
loading: boolean;
error: string | undefined;
} & EntityState<Place>;
これらの組み込みセレクターにより、状態にアクセスするためのセレクターを手動で作成する必要性が大幅に軽減されます。
事前定義されたセレクターを使用するようにセレクターをリファクタリングし、手動でセレクターを定義する必要性を減らしたら、フォーム コンポーネントを更新してこれらの変更を反映し、新しい状態とアクションを使用します。
状態、アクション、およびリデューサーがリファクタリングされたので、これらの変更を反映するためにフォーム コンポーネントを更新する必要があります。
たとえば、PlaceFormComponent では、Update
interface EntityState<V> {
ids: string[] | number[];
entities: { [id: string | id: number]: V };
}
新しいアクションとリファクタリングされた状態を使用するようにフォーム コンポーネントを更新しました。移動して、効果をチェックして NgRx エンティティ
で正しく動作することを確認しましょう。最後に、NgRx Entities でエフェクトを機能させます。必要なのは、PlacesPageActions.updatePlace パスを正しい Update
export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();
完了!私たちのアプリは NgRx エンティティ で動作しており、移行はとても簡単でした。ngrx エンティティのドキュメントは非常に役に立ちます。
コードを NgRx Entities に移動した後、コレクションを操作する際の複雑さと定型文が軽減されると感じました。 NgRx エンティティは、ほとんどのシナリオでコレクションの操作や多数のメソッドとの対話を簡素化し、CRUD 操作に必要な定型コードの多くを排除します。
この記事が、ngrx でコレクションを操作する必要があるときに ngrx-entities を使用するきっかけになれば幸いです。
Unsplash の Yonko Kilasi による写真
以上がNgRx エンティティを使用して Angular コードを簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
