4

我对RxJsandNgRx store很陌生，我想创建一个@Effectwith 两个 observables 的组合（很难解释）：

我的界面看起来像：

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

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

我正在尝试创建一个新对象productDetails并设置它的属性。属性是productwhich payloadhasproduct和productBodywhich get from productService(id)(It returns observable<productBody>)

这个效果应该返回observable<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));

这返回：Object {productBody: undefined, product: Object}

我明白为什么要返回undefined但productBody不知道如何解决它。我尝试使用zip,switchMap等但没有机会！

4

1 回答 1

3

这是你可以做的。

  • 你想flatMap通过原始的 observable 来获得将payload.id其提供给getStepBodyobservable。
  • 然后，在 内部flatMap，您希望map在getStepBodyobservable 上返回一个新值，该值是 的复合对象payload和 的响应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}

如果您不想将整个对象返回到函数中的单个函数中subscribe，则可以解构这些值以使它们更易于单独使用。为此，将subscribe行更改为：

.subscribe(({step, body}) => {//do something with each value});
于 2017-03-15T13:12:41.343 回答