Angular NgRx 效果，如何传递参数？

Posted 2023-02-19

【中文标题】Angular NgRx 效果，如何传递参数？

【英文标题】：Angular NgRx effects, how to pass a parameter?

【发布时间】：2022-01-05 12:33:37

【问题描述】：

我正在尝试将 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？

【问题讨论】：

通过switchMap() 所以：switchMap(payload => .... )

谢谢老兄！你拯救了我的一天。

【参考方案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))),
     ); 
    ),  
  )

【讨论】：

在此代码中 action.id 给出了打字稿错误，Property 'id' does not exist on type 'never'.