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