你如何结合 RxJs 和 NgRx 来进行多个 Rest-Call 并让它们等待结果？

Question

In my Effect im listening on an Action, that value of the Action is a string Array. Now i need to loop over the array and use the values as inputs for the next asnyc function.

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

I have tried a few different things. The one below seemed to get me to the closest one i wanted. But since the Rest-calls need a moment to return, the array is always empty.

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))
            }
        )       
    )
)

Does anyone have an idea, how to make the whole thing wait for the rest calls to return back?

Answer 1

Use a forkJoin .

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

The forkJoin takes an array of Obserables and emits when every Observable is completed. It outputs the results as an array.

Answer 2

Simply you can continue writing the next call after you finished the first one (someValue.forEach).

The long scenario is:

1. Call the action "someOtherAction".
2. Create a Reducer that reads the array and update the Store with it.
3. Create a Selector that reads the array from the Store.
4. In the Component you subscribe on the Selector.
5. Inside the Subscribe event you Dispatch a new Action that call the second call you mentioned. For inspiration, you can read this example in gitHub: https://github.com/DeborahK/Angular-NgRx-GettingStarted/tree/master/APM-Demo5/src/app/products/state