簡體   English   中英

NgRx Data - 如何以類型安全的方式掛鈎到 addOne 成功操作?

[英]NgRx Data - How to hook into a addOne success Action in a typesafe way?

我是@ngrx/data的新手,我正在閱讀文檔。

使用該指南,我已經能夠復制我以前手動完成的操作 - 例如使用此概述頁面上的服務,以下工作調用 REST-API 並將供應商添加到商店。

組件.ts

  onSave(supplier: Supplier) {
    this.supplierService.add(supplier);
  }

我知道我可以做到以下幾點:

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType('[Supplier] @ngrx/data/save/add-one/success'),
        tap(console.log)
      ),
    { dispatch: false }
  );

但是 - 有沒有一種類型安全的方法來成功 API 調用動作/實體動作?

更新 - 澄清

我正在使用@ngrx/data因此我不會直接自己創建操作以及類型的導出。

成功添加供應商后 - 在 http 調用后會產生一個類型為: '[Supplier] @ngrx/data/save/add-one/success'操作 - 我想執行一個效果。 而不是使用字符串'[Supplier] @ngrx/data/save/add-one/success' (如上所示)是否有類型安全的鈎子?

以前(當我自己創建動作時)我會導出一個聯合類型並執行ofType(supplierActions.addSupplier)

更新 - 更接近答案

發現ofEntityTypeofEntityOp讓我更接近我的目標,因為這些工作類似於ofType

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofEntityType('Supplier'),
        ofEntityOp(EntityOp.SAVE_ADD_ONE_SUCCESS),
        tap(console.log)
      ),
    { dispatch: false }
  );

現在只需找到一種從entityMetadata中鍵入'Supplier'的方法

const entityMetadata: EntityMetadataMap = {
  Supplier: {}
};

你可以這樣做:

let array = Object.keys(entityConfig.entityMetadata);

它將返回您的實體的名稱,在本例中為“供應商”。 然后只需將數組用作 ofEntityType 的參數

hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofEntityType(array),
        ofEntityOp(EntityOp.SAVE_ADD_ONE_SUCCESS),
        tap(console.log)
      ),
    { dispatch: false }
  );

你可以在這里查看我的完整代碼

下面是我的小樣本

我將定義一個動作列表

export enum PostActionTypes {
  LoadPosts = "[Post] Load Posts",
  LoadPostsSuccess = "[Post] Load Posts Success",
  LoadPostsFail = "[Post] Load Posts Fail",
  LoadPost = "[Post] Load Post",
  LoadPostSuccess = "[Post] Load Post Success",
  LoadPostFail = "[Post] Load Post Fail",
  UpdatePost = "[Post] Update Post",
  UpdatePostFail = "[Post] Update Post Fail",
  UpdateSelectedPost = "[Post] Update Selected Post"
}

export const LoadPosts = createAction(PostActionTypes.LoadPosts);

所以在我看來

getPosts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PostActions.LoadPosts),
      switchMap(_ => {
        return this.postService
          .getPosts()
          .pipe(
            map(
              (posts: IPost[]) => PostActions.LoadPostsSuccess({ posts }),
              catchError(errors => of(PostActions.LoadPostsFail(errors)))
            )
          );
      })
    )

所以在這種情況下你可以很容易地使用類型安全而不是使用魔法字符串

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM