Question

用户登录后，会进行多次api调用以加载用户数据。完成这些马蹄莲后，用户将被重定向到其配置中指定的登录页面。

3个api调用可以同时获取，但重定向必须等到提取完成。我已经在下面展示了我的尝试。

所有api调用都按预期工作，并将获取的数据存储在Redux中，因此（我认为）问题在于loadUserEpic正在管理整个进程并调用重定向函数。我怎样才能更好地构建这部史诗以实现我的目标呢？

Answer 1

首先触发所有三个动作来获取数据：

const loadUserEpic = action$ =>
  action$.ofType('LOAD_USER').pipe(
    mergeMap(() =>
      Observable.of(
        {
          type: 'FETCH_USER_CONFIG'
        },
        {
          type: 'FETCH_USER_MODULES'
        },
        {
          type: 'FETCH_USER_DIVISION'
        },
      )
    )
  );

现在等待每个操作完成并以某种方式检查您是否拥有所需的一切：

const redirectEpic = (action$, store) => 
  action$.ofType(
    'FETCH_USER_CONFIG_SUCCESS',
    'FETCH_USER_MODULES_SUCCESS',
    'FETCH_USER_DIVISION_SUCCESS'
  ).pipe(
    mergeMap(() => {
      const state = store.getState(); 
      const iHaveConfig = isConfigFetched(state);
      const iHaveModules = areModulesFetched(state);
      const iHaveDivisions = areDivisionsFetched(state);

      if(iHaveConfig && iHaveModules && iHaveDivisions) {
        return useRedirect();
      }

      return Observable.empty();
    })
  )

Redux-observable：在完成大量数据获取史诗后调用辅助函数

1 个答案: