Redux-observable epic调度两个动作

Question

我在redux-observable中有以下史诗

export const landingEpic = action$ => (
    action$.ofType('LOAD_USERS').delay(5000).map(() => ({
        type: 'USERS_LOADED',
        UserList: ['a','b','c','d']
    }))
);

到目前为止，我很好，但是我希望epic调度一个'LOADING_USERS‘操作，这样我就可以在加载用户时显示一个处理消息。史诗是做这件事的正确地方吗，如果是的话，我该怎么做。如果史诗不是这样做的地方，那么我应该在哪里做呢？

Answer 1

我想要做的是立即发出USERS

，然后在5秒后发出USERS_LOADED

有很多方法可以做到这一点，这里有两种：

export const landingEpic = action$ =>
  action$.ofType('LOAD_USERS')
    .mergeMap(() =>
      Observable.of({
        type: 'USERS_LOADED',
        UserList: ['a','b','c','d']
      })
        .delay(5000)
        .startWith({
          type: 'LOADING_USERS
        })
    );

export const landingEpic = action$ => (
  action$.ofType('LOAD_USERS')
    .mergeMap(() =>
      Observable.timer(5000)
        .map(() => ({
          type: 'USERS_LOADED',
          UserList: ['a','b','c','d']
        }))
        .startWith({
          type: 'LOADING_USERS
        })
    );

这里的关键是，我们需要使用mergeMap (或switchMap等，取决于您的用例)来隔离我们的顶层链，这样我们就可以创建一个在不同时间产生两个动作的可观察对象。startWith也很方便，但也可以使用concat实现相同的效果：

Observable.concat(
  Observable.of({ type: 'LOADING_USERS }),
  Observable.of({
    type: 'USERS_LOADED',
    UserList: ['a','b','c','d']
  })
    .delay(5000)
)

Answer 2

我认为你可以这样做：

const landingEpic = action$ => (
action$.ofType('LOAD_USERS').delay(5000).flatMap(() => (Observable.concat(
{
    type: 'USERS_LOADING'       
},
{
    type: 'USERS_LOADED',
    UserList: ['a','b','c','d']
}))));