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等，具体取决于您的用例）来隔离我们的顶级链，以便我们可以创建一个产生两个动作的Observable在不同的时间。 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']
}))));

Redux-observable史诗派遣两个动作

2 个答案: