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

Question

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

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}))
         )
      );

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

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

任何帮助是极大的赞赏。 已经坚持了几天。 非常感谢！

Answer 1

尝试这个：

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 })
      )
    );