Reactjs Redux observable:在完成大量数据获取操作后调用helper函数

Reactjs Redux observable:在完成大量数据获取操作后调用helper函数,reactjs,redux,rxjs,redux-observable,Reactjs,Redux,Rxjs,Redux Observable,用户登录后,会进行多次api调用以加载用户数据。完成这些调用后,用户将被重定向到其配置中指定的登录页 3个api调用可以同时获取,但是,重定向必须等待获取完成。我已经在下面展示了我的尝试 所有api调用都能正常工作,并将获取的数据存储在Redux中,因此(我认为)问题在于loadUserEpic,它管理整个过程,并调用重定向函数。我如何更好地构建这部史诗以实现我的目标 import { userRedirect } from 'ui/client/helpers/userRedirect';

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

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

所有api调用都能正常工作,并将获取的数据存储在Redux中,因此(我认为)问题在于loadUserEpic,它管理整个过程,并调用重定向函数。我如何更好地构建这部史诗以实现我的目标

import { userRedirect } from 'ui/client/helpers/userRedirect';

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

const userConfigEpic = action$ =>
  action$.ofType('FETCH_USER_CONFIG').mergeMap(() =>
    fromPromise(axios.get(`/me/configuration`))
      .map(response => ({
        type: 'FETCH_USER_CONFIG_SUCCESS',
        data: response.data
      }))
      .catch(error =>
        Observable.of({
          type: 'FETCH_USER_CONFIG_ERROR',
          error
        })
      )
  );

const userModulesEpic = action$ =>
  action$.ofType('FETCH_USER_MODULES').mergeMap(() =>
    fromPromise(axios.get(`/me/modules`))
      .map(response => ({
        type: 'FETCH_USER_MODULES_SUCCESS',
        data: response.data
      }))
      .catch(error =>
        Observable.of({
          type: 'FETCH_USER_MODULES_ERROR',
          error
        })
      )
  );

const userDivisionEpic = action$ =>
  action$.ofType('FETCH_USER_DIVISION').mergeMap(() =>
    fromPromise(axios.get(`/division/`))
      .map(response => ({
        type: 'FETCH_USER_DIVISION_SUCCESS',
        data: response.data
      }))
      .catch(error =>
        Observable.of({
          type: 'FETCH_USER_DIVISION_ERROR',
          error
        })
      )
  );

首先触发所有三个操作以获取数据:

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

如果你看这篇文章中标记的答案:-你可以看到一些解决方案(包括一个使用承诺的ES6解决方案)。@Jayce444将看一看,谢谢。通过将帮助函数返回为:
Observable.of(useRedirect())使其正常工作
@theseboys噢,我在想
useRedirect
返回
Observable
。美好的