ngrx/rxjs: 这段代码能不能先检查store再做API请求改进？

问题描述

在从后端获取新数据之前，我首先检查它是否已经在商店中，并且我会注意每次有更新时总是同步商店。

为此，我的 effect 执行以下操作：

@Effect()
LoadImage: Observable<LoadImageSuccess> = this.actions$.pipe(
  ofType(AppActionTypes.LOAD_IMAGE),withLatestFrom(action => this.store$.select(selectimage,action.payload).pipe(map(result => ({ action,result })))),switchMap(observable => observable),mergeMap(({ action,result }) =>
    result !== null
      ? of(result).pipe(map(image => new LoadImageSuccess(image)))
      : this.imageApiService.getimage(action.payload).pipe(
          map(image => new LoadImageSuccess(image)),catchError(error => EMPTY)
        )
  )
);

这似乎工作得很好，但我想知道它是否可以做得更好：

switchMap(observable => observable), 看起来不太好。
mergeMap 中的条件是否可以通过 iif 更好地处理？
当两个组件分派 LOAD_IMAGE 操作时，我的 API 调用仍然发生两次，因为在第二个请求开始时第一个请求尚未完成（并且尚未将图像放入商店）。这在我网站上的图片中并不常见，但将来可能会出现在其他组件中，我想知道是否有办法改进这一点。

谢谢！

请注意，如果我删除 switchMap(observable => observable),，我会收到以下错误：

如果我注释掉 mergeMap，传递给 switchMap 的对象是 Store 类型：

编辑：

根据接受的答案，这就是我的结果：

@Effect()
LoadImage: Observable<LoadImageSuccess> = this.actions$.pipe(
  ofType(AppActionTypes.LOAD_IMAGE),mergeMap(action =>
    this.store$.select(selectimage,action.payload).pipe(
      mergeMap(imageFromStore =>
        imageFromStore !== null
          ? of(imageFromStore).pipe(map(image => new LoadImageSuccess(image)))
          : this.imageApiService.getimage(action.payload).pipe(
              map(image => new LoadImageSuccess(image)),catchError(error => EMPTY)
            )
      )
    )
  )
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ngrx rxjs