需要帮助将rxjs forkjoin调用转换为异步调用(在ngrx @Effect中)

时间:2017-08-03 21:08:17

标签: rxjs observable angular2-services ngrx

我想重构一组使用forkJoin工作的服务调用。我有一系列来自ngrx商店的商品<>我需要为每个项目进行一次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 w / the result

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:2)

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

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[]参数。