微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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)
        )
  )
);

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

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

谢谢!

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

Error

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

Object after withLatestFrom

编辑

根据接受的答案,这就是我的结果:

@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 举报,一经查实,本站将立刻删除。