一次@ngrx/effect 中的多个 Http 调用

Question

我很困惑，我是@ngrx 的新手，所以请原谅我不明白这是如何工作的。

假设我有一个叫做 PlaceOrderEffect

的效果

在这个效果中，我想按顺序处理每个请求。

processOrder$ = createEffect(
   ofType(OrderActions.PROCESS_ORDER),
   //here is where i get confused
   concatMap([
      this.service.addCrust(),
      this.service.addTopings(),
      this.service.sendToCook()
      this.service.checkOut()
   ]
)

我怎样才能运行这些按顺序排列并处理最终响应？

Answer 1

concatMap 是要与 pipe 一起使用的 RxJS 运算符，用于将可观察源与 concatMap 返回的新源合并，这不是您的情况。

我认为如果请求不相互依赖，您可以使用 RxJS concat 函数来实现您想要做的事情，如下所示：

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        // here you need to switch and map to the new observable (concat one) returned by switchMapTo operator
        switchMap(({ payload }) =>
            concat(
                this.service.addCrust(),
                this.service.addTopings(),
                this.service.sendToCook(),
                this.service.checkOut()
            )
        )
    )
);

但是如果每个请求都依赖于前一个请求，您可以使用 concatMap 运算符，如下所示：

processOrder$ = createEffect(() =>
    this.actions$.pipe(
        ofType(OrderActions.PROCESS_ORDER),
        concatMap(({ payload }) => this.service.addCrust(payload)),
        concatMap((response1) => this.service.addTopings(response1)),
        concatMap((response2) => this.service.sendToCook(response2)),
        concatMap((response3) => this.service.checkOut(response3))
    )
);

一次@ngrx/effect 中的多个 Http 调用

Multiple Http calls in one @ngrx/effect

rxjs

typescript

ngrx

angular

angular12