前端之家

  1. 首页
  2. 问答

NgRx数据-如何以类型安全的方式加入addOne成功操作？

• 问答

我是@ngrx/data的新手，正在阅读文档。

使用guide，我已经能够复制以前手动完成的工作-例如，使用此概述页面上的service，以下工作将调用REST-API并将供应商添加到商店。

component.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)

更新-更接近答案

发现ofEntityType和ofEntityOp使ofType之类的工作使我离目标越来越近：

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

现在只想找到一种从'Supplier'键入entityMetadata的方法

const entityMetadata: EntityMetadataMap = {
  Supplier: {}
};
zdx1222 回答：NgRx数据-如何以类型安全的方式加入addOne成功操作？

您可以执行以下操作：

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

它将返回您实体的名称，在本例中为“ Supplier”。 然后只需将数组用作ofEntityType的参数

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

您可以查看我的完整代码here

下面是我的小样本

我将定义一个动作列表

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)))
            )
          );
      })
    )

因此，在这种情况下，您可以轻松使用安全类型，而不是使用魔术字符串

angularangular-ngrx-dataangular8ngrxtypescript
本文链接：https://www.f2er.com/3151178.html

大家都在问