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

big*_*ato 8 redux redux-observable

我已经遇到过很多次这个问题,我想action.payload进一步进入链条.但到那时,传递给的论点mergeMap已经变成了别的东西.

鉴于我的行为如下:

{
  type: BUY_GEMS,
  payload: { value: 123, productIdentifier: "ABC123" }
}
Run Code Online (Sandbox Code Playgroud)

而这部史诗:

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.
      ...
    });
}
Run Code Online (Sandbox Code Playgroud)

我该怎么做?

jay*_*lps 11

这个技巧就是将你的第二个mergeMap放在闭包里面,这个动作可用.事实上,即使你并不需要访问它,我通常建议在终极版,可观察到的,其中您隔离您的单个顶级并购战略运营商(内您可观测链这种模式mergeMap,switchMap等等),因为它使这样以后更加轻松地重构以及更容易的错误隔离(如果添加).

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;
          // ...
        });
    });
}
Run Code Online (Sandbox Code Playgroud)

Observable.fromPromise()我所假设的示例只是伪代码,所以我跟着Observable.fromPromise(somePromise)其他读者更加清晰.