Angular NgRx effects，如何传参？

Question

我正在尝试将 id 参数从调度发送到效果，我在 google 中找不到这种情况的任何示例。

这是我已有的代码：

组件：

 ngOnInit(): void {
   this.packageClass = `type-${this.package.packageType.toLowerCase()}`;
   // I set the payload to the action
   this.store.dispatch(new LoadClusterInfo({id: this.package.id}));
   this.checkStatus();
 }

效果（我需要访问值的地方）

@Effect()
getClusterInfo = 
  this.actions.ofType(resultActions.Type.LOAD_CLUSTER_INFO)
    .pipe(
      switchMap(() => {
        let id = 'HARDCODED_ID';
        return this.service.getPackageCluster(id); // Here is where i need the value
      }),
      map((packageCluster: PackageCluster) => new LoadClusterInfoSuccess(packageCluster)),
      catchError((err: Error) => of(new LoadClusterInfoError(err))),
    );

最后一个动作：

  export class LoadClusterInfo implements Action {
    readonly type = Type.LOAD_CLUSTER_INFO;
    constructor(readonly payload: any) {}
  }

如何在效果中获取组件(this.package.id)发送的id？

Answer 1

您可以在 switchMap 运算符中访问操作的负载属性。一些额外的事情：

使用管道 ofType 运算符，因为 ofType 函数是 removed in NgRx 7
键入 ofType 运算符以执行键入的操作
在服务流上使用map和catchError，否则发生错误时效果流将被破坏。 See the NgRx docs for more info.

@Effect()
  getClusterInfo = this.actions
  .pipe(
    ofType<LoadClusterInfo>(resultActions.Type.LOAD_CLUSTER_INFO),
    switchMap((action) => {
      return this.service.getPackageCluster(action.id).pipe(
        map((packageCluster: PackageCluster) => new LoadClusterInfoSuccess(packageCluster)),
        catchError((err: Error) => of(new LoadClusterInfoError(err))),
     ); 
    }),  
  );

更新 NgRx v8 +

使用 createAction 和 createEffect，会自动推断操作，因此您可以这样做并从以下类型中受益：

getClusterInfo = createEffect(() => {
  return this.actions.pipe(
    ofType(loadClusterInfo),
    switchMap((action) => {
      return this.service.getPackageCluster(action.id).pipe(
        map((packageCluster: PackageCluster) => new LoadClusterInfoSuccess(packageCluster)),
        catchError((err: Error) => of(new LoadClusterInfoError(err))),
     ); 
    }),  
  )
}

Answer 2

对于那些试图通过 mergeMap 获取参数的人，您可以这样做：

 loadItems$ = createEffect(() =>
        this.actions$.pipe(
          ofType(YOUR_ACTION_NAME),
          mergeMap((action) =>
            this.myService.getAll(action.parameters).pipe(
              map((items) => ({
                type: ITEMS_LOADED_SUCESSFULLY,
                items: itemsList,
              })),
              catchError(() => EMPTY)
            )
          )
        )
      );

要调度操作：

this.store.dispatch(loadItems({ parameters: parameter }))

在你的.actions.ts:

export const loadItems = createAction(
YOUR_ACTION_NAME, props<{ parameters: string }>());

Angular NgRx effects，如何传参？

Angular NgRx effects, how to pass a parameter?

angular

ngrx

ngrx-effects