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.
      ...
    });
}

как бы я это сделал?

6

1 ответов

этот трюк, чтобы просто разместить свой второй mergeMap внутри закрытия, где доступно действие. На самом деле, даже если вам не нужен доступ к нему, я обычно рекомендую этот шаблон в redux-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) для большей ясности для других читателей.

7