使用 Redux-Observable 调度延迟的第二个动作，同时保留第一个动作答案

【问题标题】：Dispatching a delayed second action with Redux-Observable while keeping the first one使用 Redux-Observable 调度延迟的第二个动作，同时保留第一个动作
【发布时间】：2017-02-19 06:37:08
【问题描述】：

我正在尝试创建一个将采取行动的史诗，然后调度两个不同的行动，第二个行动延迟两秒。经过一堆尝试，这是我能做的最好的：

const succeedEpic = action$ =>
  action$.filter(action => action.type === 'FETCH_WILL_SUCCEED')
    .mapTo({ type: 'FETCH_REQUEST' })
    .merge(Observable.of({ type: 'FETCH_SUCCESS' }).delay(2000))

不幸的是，似乎：

Observable.of({ type: 'FETCH_SUCCESS' }).delay(2000)

在我的应用程序加载后立即运行（而不是在事件从父流中下来时）。我注意到这一点是因为在我的应用程序加载后两秒钟，reducer 收到了 FETCH_SUCCESS 操作。我什至附上了console.log 来确认这一点：

const succeedEpic = action$ =>
  action$.filter(action => action.type === 'FETCH_WILL_SUCCEED')
    .mapTo({ type: 'FETCH_REQUEST' })
    .merge(Observable.of({ type: 'FETCH_SUCCESS' })
           .do(() => console.log('this has begun'))
           .delay(2000)
          )

“这已经开始”在应用程序启动时记录到控制台。

我怀疑这与 Redux-Observable 如何为您自动订阅有关。

我希望的行为是：

单击调度FETCH_WILL_SUCCEED 事件的按钮。
立即调度FETCH_REQUEST 事件。
两秒后，FETCH_SUCCESS 事件被调度。

【问题讨论】：

标签： javascript redux rxjs redux-thunk redux-observable

【解决方案1】：

事实证明，我需要将我的两个事件都包含在 mergeMap 中。感谢 RxJS Gitter 频道上的 @dorus 提供此答案。

这是我的工作结果：

const succeedEpic = action$ =>
  action$.filter(action => action.type === 'FETCH_WILL_SUCCEED')
    .mergeMapTo(Observable.of({ type: 'FETCH_REQUEST' })
      .concat(Observable.of({ type: 'FETCH_SUCCESS' })
        .delay(1000)))

merge 应该可以代替concat，但我认为concat 具有更好的语义意义。

【讨论】：

【解决方案2】：

可能有更优雅的解决方案，但为什么不直接使用 2 个史诗并将它们组合起来呢？

第一个分派获取请求：

const onFetchWillSucceed = action$ => action$.ofType('FETCH_WILL_SUCCEED')
  .mapTo({ type: 'FETCH_REQUEST' })

第二个等待2秒，派发成功：

const onFetchRequest = action$ => action$.ofType('FETCH_REQUEST')
  .delay(2000)
  .mapTo({ type: 'FETCH_SUCCESS' })

最后他们只是组合成一部史诗

const both = combineEpics(onFetchWillSucceed, onFetchRequest)

【讨论】：

这行不通，因为我的下一步是创建一个“获取将失败”的史诗，它也调度 FETCH_REQUEST，但后续操作是 FETCH_FAIL 而不是 FETCH_SUCCESS。