如何将RxJs和NgRx结合起来进行多个rest调用并使它们等待结果?

Question

在我的效果中，我正在监听一个动作，该动作的值是一个字符串数组。现在我需要循环遍历数组，并使用这些值作为下一个asnyc函数的输入。

someEffect$ = createEffect(() => 
this.action$.pipe(
ofType(someAction),
mergeMap(({ someValue }) => 
this.httpCall.getSomeTh(someValue[0]).pipe(
map((result) => someOtherAction)
)
)       
)
)

我已经尝试了一些不同的东西。下面的那个似乎让我离我想要的最近。但是由于rest调用需要一段时间才能返回，因此数组始终为空。

someEffect$ = createEffect(() => 
this.action$.pipe(
ofType(someAction),
mergeMap(({ someValue }) => {
const array = [];
someValue.forEach((value) => 
this.http.get(value).pipe(tap((object) => array.push(object)))
)
return of(someOtherAction(array))
}
)       
)
)

有没有人有办法，如何让整个事情等待剩下的电话返回?

Answer 1

使用forkJoin

someEffect$ = createEffect(() => 
this.action$.pipe(
ofType(someAction),
mergeMap(({ someValue }) => 
forkJoin(someValue.map(value => this.http.get(value)))              
)       
)
)

forkJoin接受一个可观察对象数组，并在每个可观察对象完成时发出。它以数组的形式输出结果。

Answer 2

您可以在完成第一个调用(somevaluate . foreach)后继续编写下一个调用。

长场景是:

1. 调用动作"someOtherAction"
2. 创建一个Reducer来读取数组并更新Store。
3. 创建一个从Store读取数组的选择器。
4. 在你订阅选择器的组件中
5. 在Subscribe事件中，您分派一个新的Action来调用您提到的第二个调用。为了获得灵感，你可以在gitHub上阅读这个例子:https://github.com/DeborahK/Angular-NgRx-GettingStarted/tree/master/APM-Demo5/src/app/products/state