Redux Observable:如何在链的后半部分使用action.payload?

时间:2017-07-19 06:27:16

标签: redux redux-observable

我曾经多次遇到过这个问题,我希望在链中进一步访问action.payload。但到那时,传递给mergeMap的论点已经变成了其他的东西。

鉴于我的行动如下:

{
  type: BUY_GEMS,
  payload: { value: 123, productIdentifier: "ABC123" }
}

这个史诗:

function purchaseGems(action$, store) {
  return action$
    .ofType(BUY_GEMS)
    .mergeMap(action => {
      const { productIdentifier } = action.payload; // <-------- works because it's the first mergeMap in this sequence
      return Observable.fromPromise(
        // Some promise call
      ).catch(error => Observable.of(buyGemsRejected(error)));
    })
    .mergeMap(action => {
      const { value } = action.payload; // <----------- doesn't work because "action" is now just the response of the Promise above.
      ...
    });
}

我该怎么做?

1 个答案:

答案 0 :(得分:9)

这个技巧就是将你的第二个mergeMap放在闭包里面,这个动作可用。实际上,即使您不需要访问它,我通常也会在redux-observable中推荐这种模式,您可以在单个顶级合并策略运算符(mergeMapswitchMap中隔离Observable链,等等,因为它使得将来更容易重构,以及更容易的错误隔离(如果添加)。

function purchaseGems(action$, store) {
  return action$
    .ofType(BUY_GEMS)
    .mergeMap(action => {
      const { productIdentifier } = action.payload;
      return Observable.fromPromise(somePromise)
        .catch(error => Observable.of(buyGemsRejected(error)))
        .mergeMap(response => {
          const { value } = action.payload;
          // ...
        });
    });
}

您的示例包含Observable.fromPromise(),我假设它只是伪代码,所以我跟着Observable.fromPromise(somePromise)跟进,以便其他读者更清楚。