确保在发送动作之前注入saga

时间:2017-09-14 21:41:25

标签: reactjs redux redux-saga react-boilerplate

我在我的应用程序中使用saga注入时间有些不好,有时在调度动作之前加载saga并且一切正常,有时动作被触发并且没有触发传奇效果。 我使用非常标准的代码,这是我的路线:

getComponent(nextState, cb) {
    const importModules = Promise.all([
        import ('containers/HostArea/reducer'),
        import ('containers/HostArea/ActivityRegistration/reducer'),
        import ('containers/HostArea/AccommodationRegistration/reducer'),
        import ('containers/HostArea/sagas'),
        import ('containers/HostArea/'),
    ]);

    const renderRoute = loadModule(cb);

    importModules.then(([hostAreaReducer, registerActivityReducer, registerAccommodationReducer, sagas, component]) => {
        injectReducer('hostArea', hostAreaReducer.default);
        injectReducer('registerActivity', registerActivityReducer.default);
        injectReducer('registerAccommodation', registerAccommodationReducer.default);
        injectSagas(sagas.default);
        renderRoute(component);
    });

    importModules.catch(errorLoading);
},

这是我的传奇(我删除了getCurrentHostgetHostRegistrations,但当然它们是在同一个文件中定义的):

export function* currentHostWatcher() {
  yield takeLatest(GET_CURRENT_HOST, getCurrentHost);
}

export function* getHostRegistrationsWatcher() {
  console.log('getHostRegistrationsWatcher');
  yield takeLatest(GET_HOST_REGISTRATIONS, getHostRegistrations);
}

export default [
  currentHostWatcher,
  getHostRegistrationsWatcher,
];

这是我的组成部分的相关部分:

componentDidMount() {
    console.log('componentDidMount');
    this.props.dispatch(getCurrentHost({ resolve: ((host) => this.hostAuthenticated(host)), reject: () => this.unauthenticated() }));
  }

hostAuthenticated(host) {
    console.log('host is authenticated, get his registrations');
    this.props.dispatch(getHostRegistrations({
      host,
      resolve: this.onRegistrationsLoaded,
      reject: ((err) => console.log(err)),
    }));
}

基本上我所做的是在componentDidMount上调度一个动作,并在成功调度第二个动作时,两个动作都在同一个传奇中定义。 我看到的是,使用相同的代码,只刷新页面,有时控制台日志显示

componentWillMount
componentDidMount
getCurrentHost
getCurrentHostSuccess
getHostRegistrations

但未对getHostRegistrations调用任何效果。其他时候,这一切都有效,我在日志中看到:

getHostRegistrationsWatcher
componentWillMount
componentDidMount
getCurrentHost
getCurrentHostSuccess
getHostRegistrations
host registrations loaded

正如您所看到的,在第二种情况下,在组件安装和流程正确之前执行观察程序。 所以我的问题是:有没有办法确保在安装组件之前注入saga?或任何其他解决方法?

如果你想看到代码在运作,只需在这里注册https://www.amavido.it/join(使用随机电子邮件/名称,而不是facebook);一旦登录,刷新,你会看到渲染组件的某些时候,有时候是一个永远挂起的加载指示器)

0 个答案:

没有答案