Redux Observable：如何在 flatMap 中使用 takeUntil？答案

【问题标题】：Redux Observable: How to use takeUntil inside flatMap?Redux Observable：如何在 flatMap 中使用 takeUntil？
【发布时间】：2017-03-25 02:33:24
【问题描述】：

我有一个平面地图，目的是发出两个动作：

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

【问题讨论】：

所以如果在 2000 延迟期间收到 TAP_CANCEL，您不想发出操作？
hm 如果收到TAP_CANCEL，我想取消flatMap 中所有内容的执行。我想我可能把 delay(2000) 放在了错误的位置
@cartant 用我拼凑的丑陋解决方案更新了问题
正确，我不希望 carouselActions.slideTo 和 statusActions.foundPerson 在 2 秒延迟之前调用 TAP_CANCEL 时发生副作用

标签： rxjs redux-observable

【解决方案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 在前一个仍在等待的情况下进来，您将排成一列。可能不想要你想要的，但你必须打那个电话。

【讨论】：

哇不错！有没有你学到这些东西的书/网站？ rx 文档非常糟糕
我主要是通过经验学习的，之前我是核心团队的成员。您正在阅读哪些文档？如果您还没有，我建议您从头到尾阅读：reactivex.io/rxjs/manual/overview.html 另一件有帮助的事情是基本上构建一个“RxJS lite 克隆”。了解它是如何工作的，这将使它不那么神奇呵呵:) medium.com/@benlesh/…
太棒了，我去看看！非常感谢
RxJs 错误：TypeError: (0 , _rxjs.of)(...).delay 不是函数