NgRx 效果 - 获取商店的值然后管道进入服务调用时出现类型错误

Question

我正在尝试构建一个 NgRx 效果，但我看不出这个例子有什么问题（我真的很想理解）

我有以下

 public loadData = createEffect(() =>
    this.actions$
        .pipe(
            ofType(myActions.loadData),
            exhaustMap(_ =>
                this.store$.pipe(
                    tap(_ => { this.logger.info(`loadData`)}),
                    select(fromApp.getName),
                    first(),
                    map(name => {
                        from(this.getData(name))
                            .pipe(
                                 map(data => myActions.loadDataSuccess(data)))
                            
                    }),
                    catchError(error => {
                     tap(_ => this.logger.error(`loadData: ${error}`));
                     return of(new myActions.loadDataError(error));
                   })
     ))));


/** Service call **/
private async getData(name: string): Promise<DataState[]> {
     ...
}

这就是我对流程的解释（显然在某处是错误的）..

首先在 exhaustMap 中，我使用 this.store$.pipe 获取服务调用所需的参数。所以这个 cal tofirst 应该 return a string (name).

然后我使用 map 将此字符串“映射”到 from(this.getData(name))。作为我的 getData return 的承诺，我使用 from 转换为 observable。

然后我 pipe 这个可观察的结果（数据数组）到另一个地图，我想 return 效果结果，即包含服务器结果的动作 loadDataSuccess .

catchError 想用其中的服务方法调用捕获来自 map 的任何错误。

IDE 显示以下错误

    Type 'Observable<unknown>' is not assignable to type 'EffectResult<Action>'.
       Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'.
         Property 'type' is missing in type '{}' but required in type 'Action'.ts(2322)

我不知道我哪里出错了（即使删除catchError我也做不对）？

更新 1

根据@Alif50 建议使用 switchMap，IDE 告诉我添加 return，并删除 catchError。我现在有..

public loadData  = createEffect(() =>
this.actions$
  .pipe(
    ofType(myActions.loadData ),
    exhaustMap(_ =>
      this.store$.pipe(
        tap(_ => { this.logger.info(`loadData`)}),
        select(fromApp.getName),
        first(),
        switchMap(name => {
          return from(this.getData(name))
            .pipe(map(data => myActions.loadDataSuccess(data)));
        }))
     )));

没有错误，所以这是向前迈出的一步，但我仍然无法让 catchError 在任何地方工作。所以现在我只需要知道在哪里添加 catchError?

Answer 1

我认为 map 应该是 switchMap，因为我们要切换到新的 Observable。:

map(name => { // change this map to a switchMap
 from(this.getData(name))
          .pipe(
              map(data => myActions.loadDataSuccess(data)))
           }),

!!!!编辑 !!!!

public loadData  = createEffect(() =>
this.actions$
  .pipe(
    ofType(myActions.loadData ),
    exhaustMap(_ =>
      this.store$.pipe(
        tap(_ => { this.logger.info(`loadData`)}),
        select(fromApp.getName),
        first(),
        switchMap(name => {
          return from(this.getData(name))
            .pipe(
               map(data => myActions.loadDataSuccess(data)),
               // add the catchError here because I think this.getData is the point of failure
               catchError(error => {
                 // You also can't have a tap there like you do
                 // in your catchError
                 // I would prefer this instead of the tap though
                 // this.logger.error(`loadData: ${error}`);
                 return of(new myActions.loadDataError(error)).pipe(
                    // use tap like this !!
                    tap(_ => this.logger.error(`loadData: ${error}`))
                 );
               }),
           );
        }))
     )));

NgRx 效果 - 获取商店的值然后管道进入服务调用时出现类型错误

NgRx Effect - type errors when getting a value for the store then piping into service call

rxjs

ngrx

angular

更新 1