2

我在 redux-observable 中有以下史诗

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

到目前为止我很好,但是我希望史诗发送一个 'LOADING_USERS' 动作,以便我可以在加载用户时显示处理消息。史诗是这样做的正确地方,如果是这样,我该怎么做。如果史诗不是这样做的地方,那么我在哪里做呢?

4

2 回答 2

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)
)
于 2017-05-01T18:10:17.127 回答
0

我认为您可以执行以下操作:

const landingEpic = action$ => (
action$.ofType('LOAD_USERS').delay(5000).flatMap(() => (Observable.concat(
{
    type: 'USERS_LOADING'       
},
{
    type: 'USERS_LOADED',
    UserList: ['a','b','c','d']
}))));
于 2017-04-28T23:32:21.800 回答