Redux Observable : How to use action. 有效载荷在链的后半部分？

Question

我在想访问 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.
      ...
    });
}

我该怎么做？

Answer 1

这个技巧是放置你的第二个 mergeMap在 Action 可用的闭包内。事实上，即使您不需要访问它，我通常也会在 redux-observable 中推荐这种模式，即您将 Observable 链隔离在单个顶级合并策略运算符( 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;
          // ...
        });
    });
}

您的示例包含 Observable.fromPromise()我认为这只是伪代码，所以我效仿 Observable.fromPromise(somePromise)为了让其他读者更清楚。