时间戳

首页 > 解决方案 > 对异步 redux-observable 操作进行排序

rxjs - 对异步 redux-observable 操作进行排序

问题描述

我想对多个异步操作进行排序，当它们全部完成时，发出最终操作：

const initializeEpic = (action$, state$, dependencies) =>
    action$.ofType("INITIALIZE_APP_REQUEST").pipe(
        mergeMap((action) => 
            [
                getUserRequest(),
                getCoreDataRequest(),
                // many other requests ...

                // now here I want to subscribe to GET_USER_SUCCESS,
                // GET_CORE_DATA_SUCCESS and other request "success" type's and 
                // once all are called, call initializeApp.success()
                // keep in mind that "..._SUCCESS" actions are called from
                // corresponding getUserEpic, getCoreDataEpic, etc...
            ]
        )
    )

我不确定我是否正在尝试用好的方法来实现史诗般的构图，但简而言之，我的想法是：

  1. PARENT_REQUEST用动作调用父史诗
  2. 通过相应的动作调用子史诗*_CHILD_REQUEST（子史诗将通过 捕获它action$.ofType(*_CHILD_REQUEST)）
  3. 订阅*_CHILD_SUCCESS父史诗中的动作（从子史诗派发）
  4. 调用所有*_CHILD_SUCCESS操作后，调用PARENT_SUCCESS

标签： rxjsredux-observable

解决方案

相信你正在寻找forkJoin。你可以这样做：

const loadEpic = (action$, state$) =>
  action$.ofType("INITIALIZE_APP_REQUEST").pipe(
    mergeMap((action) =>
      forkJoin([
        getUserRequest(),
        getCoreDataRequest()
      ]).pipe(
        map(([users, coreData]) =>
          initializeApp.success(users, coreData)
        )
      )
    )
  )

请注意，请求是同时完成的，而不是顺序完成的。只要它们不相互依赖，您就不必按顺序制作。

此外，getUserRequest()并且getCoreDataRequest()必须返回一个可观察的，例如：

function getUserRequest() {
  return from(axios.get(`/endpoint`)).pipe(map(response => response.data));
}

推荐阅读