多个连续效果未完成?

时间:2017-12-21 16:57:31

标签: angular typescript rxjs ngrx ngrx-effects

我不确定这篇文章的标题是否能很好地解释我的问题,但这是我的情况。

我有一棵懒洋洋地装着孩子的树。展开树节点时,它将调度 @Effect() loadChildren$: Observable<Action> = this.actions$ .ofType(ActionTypes.LOAD_CHILDREN).switchMap((action: LoadChildrenAction) => { return this.categoryService.loadChildren(action.payload).map( children => new LoadChildrenSuccessAction({ parent: action.payload, children }) ); }); ,其中父节点刚刚扩展为有效负载。

这是我的效果:

LoadChildrenSuccessAction

如果我只扩展一个节点,这完全可以正常工作。调度LoadChildrenAction并在我的reducer中更新树。

但是,如果我展开一个节点,然后在第一个操作完成之前展开另一个节点,那么只有最后一个操作完成。

也就是说,我扩展了一个节点,然后在第一个节点仍在加载时立即展开另一个节点。第二个树节点使用其子内容进行更新,但第一个树节点永远不会更新。事实上,两个LoadChildrenSuccessAction被派遣 - 每个扩展一个 - 但只有一个 console.log被派遣。

如果我在categoryService.loadChildren函数中放置{{1}},它会被记录两次 - 因此服务被调用两次。但是只有一个动作被调度,所以我失去了第一个动作 - 它永远不会完成。

知道我在这里做错了吗?

1 个答案:

答案 0 :(得分:3)

这是因为你正在使用.switchMap,如果在发出下一个observable之前尚未完成,它将取消之前的observable。第一个loadChildren被调用,当第二个在完成之前被调用时,第一个调用被取消。

您可以使用.mergeMap代替loadChildren,这样您就可以并行多次调用{{1}}。请记住,这会消除重复请求的某种自动取消,因此如果您需要这样的功能,您必须自己处理它。