NgRx エンティティを使用して Angular コードを簡素化する

夏、私はお気に入りの場所を処理する小さなアプリケーションを構築して、NgRx スキルをリフレッシュしました。そのプロセス中、アプリの状態を実際に制御できたので、NgRx を楽しめました。

多くのノイズを引き起こしたことの 1 つは、CRUD 操作に定義するセレクターとアクションの数でした。私の個人的なプロジェクトでは、それほど問題はありませんでしたが、多くのスライスやセクション、セレクターやリデューサーを含む大規模なアプリケーションを構築する場合、コードの保守が難しくなりました。

たとえば、成功、エラー、更新、削除のアクションと各操作のセレクターを記述すると、複雑さが増し、より多くのテストが必要になります。

そこで、NgRx Entities の出番です。NgRx Entities は定型コードを削減し、テストを簡素化し、配信時間を短縮し、コードベースをより保守しやすく保ちます。この記事では、NgRx Entities を使用してプロジェクト内の場所の状態管理をリファクタリングし、CRUD ロジックを簡素化する方法を説明します。

NgRx エンティティとは何ですか?なぜ?

コードに入る前に、まず NgRx エンティティ とは何か、そしてなぜそれらの使用を検討する必要があるのか​​を理解しましょう。

@NgRx/Entities とは何ですか

NgRx Entities は、データ収集の操作を簡素化する NgRx の拡張機能です。これは、状態に対するエンティティの追加、更新、削除や、ストアからのエンティティの選択などの操作を簡単に実行できる一連のユーティリティを提供します。

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 };
}
</v>

エンティティの状態について詳しく読む

エンティティアダプター

EntityAdapter は、createEntityAdapter 関数を使用して作成されます。エンティティの追加、更新、削除など、状態内のエンティティを管理するための多くのヘルパー メソッドを提供します。さらに、エンティティの識別方法と並べ替え方法を構成できます。

interface EntityState<v> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}
</v>

EntityAdapter を使用すると、エンティティの識別方法 (selectId) と、sortComparer を使用してコレクションを並べ替える方法を定義することもできます。

EntityAdapter について詳しく読む

基本を理解したので、NgRx Entities

を使用してアプリケーション内の場所の状態管理をリファクタリングする方法を見てみましょう。

プロジェクトのセットアップ

まず、前の記事からリポジトリのクローンを作成し、基本的な CRUD セットアップがあるブランチに切り替えます。

export const adapter: EntityAdapter<place> = createEntityAdapter<place>();
</place></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、ストアから場所のリストを取得するには、セレクターを使用します。

NgRx エンティティのインストール

まず、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 };
}
</v>

最後に、getInitialState:
を使用して、手動の初期状態をアダプターによって提供されるものに置き換えます。

export const adapter: EntityAdapter<place> = createEntityAdapter<place>();
</place></place>

EntityState を使用するように状態をリファクタリングし、場所のリストを自動的に処理するように EntityAdapter を初期化しました。

NgRx エンティティを使用するアクションを更新してみましょう。

アクションのリファクタリング

前の記事では、エンティティの更新と変更を手動で処理しました。ここで、NgRx Entities を使用して、Update を使用した部分更新を処理します。

places.actions.ts で、Update を使用するように Update Place アクションを更新します。これにより、エンティティの一部のみを変更できるようになります。

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

完璧です。更新の処理を簡素化するために Update タイプを使用して、NgRx エンティティ で動作するようにアクションを更新しました。これがリデューサーにどのような影響を与えるかを確認し、場所の追加、更新、削除などの操作にエンティティ アダプター メソッドを使用するようにリファクタリングします。

Reducerのリファクタリング

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>;
</place>

これらの組み込みセレクターにより、状態にアクセスするためのセレクターを手動で作成する必要性が大幅に軽減されます。

事前定義されたセレクターを使用するようにセレクターをリファクタリングし、手動でセレクターを定義する必要性を減らしたら、フォーム コンポーネントを更新してこれらの変更を反映し、新しい状態とアクションを使用します。

フォームコンポーネントの更新

状態、アクション、およびリデューサーがリファクタリングされたので、これらの変更を反映するためにフォーム コンポーネントを更新する必要があります。

たとえば、PlaceFormComponent では、Update を使用するように save メソッドを更新できます。変更を保存するときに次のように入力します:

interface EntityState<v> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}
</v>

新しいアクションとリファクタリングされた状態を使用するようにフォーム コンポーネントを更新しました。移動して、効果をチェックして NgRx エンティティ

で正しく動作することを確認しましょう。

リファクタリング効果

最後に、NgRx Entities でエフェクトを機能させます。必要なのは、PlacesPageActions.updatePlace パスを正しい Update に更新することだけです。 updatePlaceEffect$ エフェクト内のオブジェクト。

export const adapter: EntityAdapter<place> = createEntityAdapter<place>();
</place></place>

完了!私たちのアプリは NgRx エンティティ で動作しており、移行はとても簡単でした。ngrx エンティティのドキュメントは非常に役に立ちます。

結論

コードを NgRx Entities に移動した後、コレクションを操作する際の複雑さと定型文が軽減されると感じました。 NgRx エンティティは、ほとんどのシナリオでコレクションの操作や多数のメソッドとの対話を簡素化し、CRUD 操作に必要な定型コードの多くを排除します。

この記事が、ngrx でコレクションを操作する必要があるときに ngrx-entities を使用するきっかけになれば幸いです。

• ソースコード: https://github.com/danywalls/start-with-ngrx/tree/ngrx-entities

Unsplash の Yonko Kilasi による写真

以上がNgRx エンティティを使用して Angular コードを簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。