rxjs - Redux 可观察 : How to use takeUntil inside flatMap?

Question

我有一个 flatMap，其目的是发出两个操作:

export default function searchForPartner(action$, store) {
  return action$.ofType(statusActions.SEARCH_FOR_PARTNER)
    .filter(() => store.getState().user.signedIn)
    .delay(2000)
    .flatMap(() => [
      carouselActions.slideTo(config.CAROUSEL_SLIDES.CONFIRM_CHAT),
      statusActions.foundPerson(),
    ])
    .takeUntil(action$.ofType(carouselActions.TAP_CANCEL))
};

但是，takeUntil 位于错误的位置。当发出 TAP_CANCEL 时，它会取消整个史诗。相反，我只希望它取消 flatMap 内操作的发出。我该怎么做？

===更新===

我搞了一下，这似乎有效？但我不喜欢有 2 个计时器:

export default function searchForPartner(action$, store) {
  return action$.ofType(statusActions.SEARCH_FOR_PARTNER)
    .filter(() => store.getState().user.signedIn)
    .mergeMap(() =>
      Observable.merge(
        Observable.timer(2000)
          .map(() => carouselActions.slideTo(config.CAROUSEL_SLIDES.CONFIRM_CHAT)),
        Observable.timer(2000)
          .map(() => statusActions.foundPerson())
      )
      .takeUntil(action$.ofType(carouselActions.TAP_CANCEL))
    )
};

Answer 1

您需要将delay和takeUntil隔离到内部Observable中，最重要的是您启动delay计时器，然后 takeUntil 它，这样如果有人取消它，您肯定会监听 - 如果您的 delay 在外面，您就不会监听取消操作然而!这很微妙，但理解原因很重要。

export default function searchForPartner(action$, store) {
  return action$.ofType(statusActions.SEARCH_FOR_PARTNER)
    .filter(() => store.getState().user.signedIn)
    .flatMap(() =>
      Observable.of(
        carouselActions.slideTo(config.CAROUSEL_SLIDES.CONFIRM_CHAT),
        statusActions.foundPerson()
      )
        .delay(2000)
        .takeUntil(action$.ofType(carouselActions.TAP_CANCEL))
    );
}

您可能还需要考虑使用 switchMap 而不是 flatMap(又名 mergeMap)，因为如果另一个 SEARCH_FOR_PARTNER当前一个还在等待时进来，你就会有一个队列在排队。可能不想要你想要的，但你必须做出这个决定。