【问题标题】:Need help converting a rxjs forkjoin call to an async call (inside an ngrx @Effect)需要帮助将 rxjs forkjoin 调用转换为异步调用(在 ngrx @Effect 内)
【发布时间】:2017-08-03 21:08:16
【问题描述】:

我想重构一组使用 forkJoin 工作的服务调用。我有一组来自ngrx Store的项目,我需要为每个项目进行http调用)。

forkjoin 的问题在于它本质上是一个阻塞操作,所以我需要等待所有调用在它返回之前完成 - 它可能是一个很长的列表。

我希望调用是异步的 - 因此循环每个项目,调用服务并返回结果,以便 UI 更新项目。 (为了使事情复杂一点,这被包裹在一个ngrx @Effect中)

这是我的工作代码:

@Effect()
    loadItemValues$: Observable<Action> = this.actions$
        .ofType(setActions.LOAD_ITEMS_DATA)
        .map(toPayload)
        .switchMap(key => {
            return this.store.select(fromRoot.getItems)
                .flatMap(items => {
                    let observables = new Array();
                    for (let i of items) {
                        observables.push(this.myService.getItemInfo(i, key));
                    }
                    return Observable.forkJoin(observables)
                    .map((res: Grades[]) => {
                        return new setActions.LoadValuesSuccessAction(res); 
                    })
                })
        })

我假设我需要创建一个新的 Observable 并再次使用 flatmap,但要弄清楚如何/什么传递回链以确保为每个项目调用服务并随后调用带有结果的 LoadValuesSuccessAction Reducer .

任何帮助将不胜感激。

【问题讨论】:

  • 所以您想要一个一个地发出值,每个值都在 LoadValuesSuccessAction 中 - 每个动作都包含一个包含单个值的数组?
  • @cartant 是正确的。 Success Action 设置状态(通过 reducer)

标签: rxjs observable angular2-services ngrx


【解决方案1】:

变化很小。您需要做的就是替换这个:

return Observable.forkJoin(observables)
.map((res: Grades[]) => {
    return new setActions.LoadValuesSuccessAction(res); 
})

用这个:

return Observable.merge(...observables)
.map((res: Grades) => {
    return new setActions.LoadValuesSuccessAction([res]);
})

不要使用forkJoin,而是使用merge。这将看到单个Grades 发出(一旦它们可用)而不是单个Grades[]。您还需要将收到的 res 包装在一个数组中,因为您的操作创建者似乎接受了 Grades[] 参数。

【讨论】:

  • 谢谢carant - 看起来这正在工作。快速提问,省略号有什么作用?
  • array spread syntax。许多 RxJS 方法接受多个可观察参数,并且在传递多个参数时它们的行为一致。但是,有些在传递数组时表现不同(例如,forkJoin 将数组参数视为与多个可观察参数相同,但 concat 不会 - 它将数组视为 ObservableInput)所以我喜欢使用扩展语法为了一致性。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-24
  • 2019-12-23
  • 2021-11-06
  • 2016-12-17
相关资源
最近更新 更多