@ ngrx / data-コレクションリデューサーを拡張したり、データサービス呼び出しの結果の処理を置き換えたりするにはどうすればよいですか？

debugcn 投稿 Dev

アンドリュー・アレン

@ ngrx / dataを使用して、getWithQueryAPI呼び出しの結果をデフォルトとは異なる方法で処理したいと思います。

現在、これがエンティティの配列を返す場合、これはentityCache直接ロードされます。

これまで、概要に示されている標準パターンを使用してきました。

export const entityMetadata: EntityMetadataMap = {
  PurchaseOrder: {}
};

@Injectable({
  providedIn: "root"
})
export class PurchaseOrderService extends EntityCollectionServiceBase<
  PurchaseOrder
> {
  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super("PurchaseOrder", serviceElementsFactory);
  }
}

代わりに、次のAPI応答を処理entitiesし、通常どおりにentityCacheにロードgetWithQueryしtotalますが、ストアの他の場所にも固定します。

{
    "entities": [{...}, {...}, ..., {...}],    // list of entities
    "total": 100
}

このAPI応答が返されると、当然、次のエラーが発生します。

私の理解では、デフォルトのレデューサーがエンティティごとに作成および登録され、EntityCollectionDataServiceインターフェイスにadd / delete / getAll / getById / getWithQuery / updateメソッドが提供されます。

これらのメソッドを維持したいのですがgetWithQuery、目的を達成するためにレデューサーをオーバーライドします。

これは、エンティティリデューサーの動作のカスタマイズで説明されています

ただし、コレクションレデューサーを、前後に実行される追加のレデューサーロジックで拡張したい場合がよくあります。

これは実際にどのように行うことができますか？

getWithQuery内部をオーバーライドしようとすると、上記のエラーが発生しますPurchaseOrderService

  getWithQuery(params) {
    return super.getWithQuery(params).pipe(tap(result => console.log(result)));
  }

アンドリュー・アレン

カスタムEntityDataServiceを使用してこれを機能させることができました

@Injectable()
export class PurchaseOrderDataService extends DefaultDataService<
  PurchaseOrder
> {
  constructor(
    http: HttpClient,
    httpUrlGenerator: HttpUrlGenerator,
    logger: Logger,
    config: DefaultDataServiceConfig
  ) {
    super("PurchaseOrder", http, httpUrlGenerator, config);
  }

  getWithQuery(params: string | QueryParams): Observable<PurchaseOrder[]> {
    return super.getWithQuery(params).pipe(
      tap(res => console.log(res)),
      map((res: any) => res.entities)
    );
  }
}

次に、これを登録する必要があります。

@NgModule({
  providers: [PurchaseOrderDataService] // <-- provide the data service
})
export class EntityStoreModule {
  constructor(
    entityDataService: EntityDataService,
    purchaseOrderDataService: PurchaseOrderDataService
  ) {
    entityDataService.registerService(
      "PurchaseOrder",
      purchaseOrderDataService
    ); // <-- register it
  }
}

そしてこれを一緒にインポートします EntityDataModule.forRoot({ entityMetadata }),

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

Related 関連記事

記事