Question

我试图创建一个将采取行动的史诗，然后发出两个不同的动作，第二个动作延迟两秒。经过一番尝试，这是我能做的最好的事情：

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

不幸的是，似乎：

FETCH_SUCCESS

在我的应用程序加载后立即运行（而不是在父流中发生事件时）。我注意到了这一点，因为在加载我的应用程序后两秒钟，reducer收到了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) )来证实这一点：

FETCH_WILL_SUCCEED

＆＃34;这已经开始了＃34;应用程序启动时会记录到控制台。

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

我希望的行为是：

单击调度FETCH_REQUEST事件的按钮。
立即发送FETCH_SUCCESS事件。
在此之后两秒钟，将调度{{1}}事件。

Answer 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具有更好的语义感。

Answer 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)

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

2 个答案: