Redux可观察到的:如何等待多个异步请求然后在史诗中执行操作

时间:2018-06-20 15:16:10

标签: reactjs rxjs redux-observable

我想等待下面的两个http请求完成,然后再触发其他操作。但是,未触发http请求。仅触发了DASHBOARD_INIT操作:

total 0
lrwx------ 1 root root 64 Jun 20 15:38 0 -> /dev/pts/0
lrwx------ 1 root root 64 Jun 20 15:38 1 -> /dev/pts/0
lrwx------ 1 root root 64 Jun 20 15:39 10 -> socket:[155862]
lrwx------ 1 root root 64 Jun 20 15:39 11 -> socket:[155876]
lrwx------ 1 root root 64 Jun 20 15:39 12 -> socket:[155877]
lrwx------ 1 root root 64 Jun 20 15:39 13 -> socket:[155878]
lrwx------ 1 root root 64 Jun 20 15:39 14 -> socket:[155879]
lrwx------ 1 root root 64 Jun 20 15:39 15 -> socket:[155880]
lrwx------ 1 root root 64 Jun 20 15:39 16 -> socket:[155882]
lrwx------ 1 root root 64 Jun 20 15:39 17 -> socket:[154981]
lrwx------ 1 root root 64 Jun 20 15:39 18 -> socket:[154982]
lrwx------ 1 root root 64 Jun 20 15:39 19 -> socket:[153455]
lrwx------ 1 root root 64 Jun 20 15:38 2 -> /dev/pts/0
lrwx------ 1 root root 64 Jun 20 15:39 20 -> socket:[156950]
lrwx------ 1 root root 64 Jun 20 15:39 21 -> socket:[156951]
lrwx------ 1 root root 64 Jun 20 15:39 22 -> socket:[156952]
lrwx------ 1 root root 64 Jun 20 15:39 23 -> socket:[156953]
lrwx------ 1 root root 64 Jun 20 15:39 24 -> socket:[153456]
lrwx------ 1 root root 64 Jun 20 15:39 25 -> socket:[156954]
lrwx------ 1 root root 64 Jun 20 15:39 26 -> socket:[156955]
lrwx------ 1 root root 64 Jun 20 15:39 27 -> socket:[156956]
lrwx------ 1 root root 64 Jun 20 15:39 28 -> socket:[156957]
lrwx------ 1 root root 64 Jun 20 15:39 29 -> socket:[156958]
lrwx------ 1 root root 64 Jun 20 15:38 3 -> /dev/i2c-1
lrwx------ 1 root root 64 Jun 20 15:39 30 -> socket:[156959]
lrwx------ 1 root root 64 Jun 20 15:39 31 -> socket:[156960]
lrwx------ 1 root root 64 Jun 20 15:39 32 -> socket:[156961]
lrwx------ 1 root root 64 Jun 20 15:39 33 -> socket:[156962]
lrwx------ 1 root root 64 Jun 20 15:39 34 -> socket:[156964]
lrwx------ 1 root root 64 Jun 20 15:39 35 -> socket:[156965]
lrwx------ 1 root root 64 Jun 20 15:39 36 -> socket:[156966]
lrwx------ 1 root root 64 Jun 20 15:39 37 -> socket:[156998]
lrwx------ 1 root root 64 Jun 20 15:39 38 -> socket:[154984]
lrwx------ 1 root root 64 Jun 20 15:39 39 -> socket:[155903]
lrwx------ 1 root root 64 Jun 20 15:38 4 -> anon_inode:[eventpoll]
lrwx------ 1 root root 64 Jun 20 15:39 40 -> socket:[155906]
lrwx------ 1 root root 64 Jun 20 15:39 41 -> socket:[153492]
lrwx------ 1 root root 64 Jun 20 15:39 42 -> socket:[153498]
lrwx------ 1 root root 64 Jun 20 15:39 43 -> socket:[153502]
lrwx------ 1 root root 64 Jun 20 15:39 44 -> socket:[155930]
lrwx------ 1 root root 64 Jun 20 15:39 5 -> socket:[155855]
lrwx------ 1 root root 64 Jun 20 15:39 6 -> socket:[155856]
lrwx------ 1 root root 64 Jun 20 15:38 7 -> socket:[155859]
lrwx------ 1 root root 64 Jun 20 15:39 8 -> socket:[155860]
lrwx------ 1 root root 64 Jun 20 15:39 9 -> socket:[155861]

要触发http请求,我必须执行以下操作,而这并不是我想要的。 Concat强制按顺序排列http请求,并且下面的代码按顺序侦听FETCH_CONFIG_FULFILLED和FETCH_PERMISSION_FULFILLED,有时会中断,具体取决于fetchConfig的响应是否先返回。

export const dashboardInitEpic = (action$: any) =>
    action$.ofType(InitActionTypes.DASHBOARD_INIT)
        .switchMap((action: ActionDashboardInit) =>
           zip$(
             of$(fetchConfig(action.payload)),
             of$(fetchPermission(action.payload))
           ).switchMap(() =>
           zip$(
             action$.ofType(ActionTypes.FETCH_CONFIG_FULFILLED).take(1),
             action$.ofType(ActionTypes.FETCH_PERMISSION_FULFILLED).take(1)
           ).switchMap(() => of$({type: InitActionTypes.DASHBOARD_INIT_COMPLETE}))
         )
      );

任何帮助将不胜感激。已经坚持了几天。 非常感谢!

1 个答案:

答案 0 :(得分:0)

尝试一下:

export const dashboardInitEpic = (action$: any) =>
  action$
    .ofType(InitActionTypes.DASHBOARD_INIT)
    .mergeMap((action: ActionDashboardInit) =>
      concat$(
        of$(fetchConfig(action.payload)),
        of$(fetchPermission(action.payload)),
        zip$(
          action$.ofType(ActionTypes.FETCH_CONFIG_FULFILLED).take(1),
          action$.ofType(ActionTypes.FETCH_PERMISSION_FULFILLED).take(1)
        ).mapTo({ type: InitActionTypes.DASHBOARD_INIT_COMPLETE })
      )
    );