RxJs：如何将两个 observable 组合成一个不同类型的新 observable

Question

我对 RxJs 和 NgRx store 很陌生，我想创建一个 @Effect 结合两个可观察量（很难解释）：

我的界面看起来像：

export interface ProductDetails {
  product: Product;
  productBody: ProductBody;
}

export interface ProductBody{
  id: string;
  body: string;
}

我正在尝试创建一个新对象productDetails 并设置它的属性。属性是 product 其中 payload 有 product 和 productBody 从 productService(id) 得到它（它 returns observable<productBody>）

这个效果应该returnobservable<productDetails>

   @Effect()
  getProductDetails$ = this.actions$
    .ofType(ProductActions.GET_STEP)
    .map(action => action.payload)
    .flatMap(s => {
      let body;
      this.productService.getStepBody(s.id).subscribe(x => body = x);
      return Observable.of({
        step: s,
        productBody: body
      });
    })
    .map(res => this.productActions.getProductDetailsSuccess(res));

这个returns:Object {productBody: undefined, product: Object}

我理解为什么 returning undefined 用于 productBody 但不确定如何修复它。我尝试使用 zip、switchMap 等但没有机会！

Answer 1

您可以执行以下操作。

您想 flatMap 原始可观察对象以获得 payload.id 并将其提供给 getStepBody 可观察对象。
然后，在 flatMap 内，您希望 map 在 getStepBody 可观察到 return 一个新值，它是 [=18] 的复合对象=] 和 getStepBody 的响应。
最后subscribe得到最终结果

看起来像这样：

getProductDetails$ = this.actions$
    .ofType(ProductActions.GET_STEP)
    .map(action => action.payload)
    .flatMap(payload => this.productService.getStepBody(payload.id).map(body => ({step: payload, productBody: body})))
    .subscribe(res => this.productActions.getProductDetailsSuccess(res));  //res is an object of {step: payload, productBody: body}

如果您不想 return 将整个对象放入 subscribe 函数中的单个函数中，您可以解构这些值以使其更易于单独使用。为此，将 subscribe 行更改为：

.subscribe(({step, body}) => {//do something with each value});

RxJs：如何将两个 observable 组合成一个不同类型的新 observable

RxJs: How to combine two observable into a new observable with different type

side-effects

rxjs

ngrx-effects