Redux-observable：如何等待多个异步请求然后在史诗中执行操作

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