你如何結合 RxJs 和 NgRx 來進行多個 Rest-Call 並讓它們等待結果？

Question

在我的 Effect 中，我正在監聽一個 Action，該 Action 的值是一個字符串數組。 現在我需要遍歷數組並將這些值用作下一個 asnyc function 的輸入。

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

我嘗試了一些不同的東西。 下面的那個似乎讓我找到了我想要的最接近的那個。 但是由於 Rest-calls 需要一段時間才能返回，所以數組總是空的。

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

有誰知道如何讓整個事情等待 rest 電話返回？

Answer 1

使用forkJoin 。

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

forkJoin接受一個 Obserables 數組，並在每個 Observable 完成時發出。 它將結果輸出為數組。

Answer 2

您只需在完成第一個調用 (someValue.forEach) 后繼續編寫下一個調用。

長期的情況是：

1. 將操作稱為“someOtherAction”。
2. 創建一個讀取數組並用它更新 Store 的 Reducer。
3. 創建一個從存儲中讀取數組的選擇器。
4. 在您訂閱選擇器的組件中。
5. 在 Subscribe 事件中，您 Dispatch 一個新的 Action 調用您提到的第二個調用。 為了獲得靈感，您可以閱讀 gitHub 中的這個示例： https://github.com/DeborahK/Angular-NgRx-GettingStarted/tree/master/APM-Demo5/src/app/products/state