确保在发送动作之前先添加传奇内容

Question

我在应用程序中添加了传奇游戏时遇到了一些麻烦，有时会在调度动作之前加载传奇游戏，并且一切正常，有时会触发该动作，并且不会触发传奇游戏效果。我使用的是非常标准的代码，这是我的路线：

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

这是我的传奇（我删除了getCurrentHost和getHostRegistrations，但它们当然是在同一个文件中定义的：]

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

如您所见，在第二种情况下，监视程序是在组件安装且流程正确之前执行的。所以我的问题是：有没有办法确保在安装组件之前先注入传奇？还是其他解决方法？

[如果您想查看运行中的代码，只需在https://www.amavido.it/join处注册（使用随机电子邮件/名称而不是Facebook）；登录后，刷新一下，您有时会看到rendere组件，有时会看到一个永久挂起的加载指示器）

Answer 1

我在使用反应样板时遇到了类似的问题。我使用compose()修复了它。

不要这样做：

import { useInjectSaga } from 'utils/injectSaga';

export function App() {
  useInjectSaga({ key: 'app', saga }); //it's already too late, we're already loading the component

  return <div />;
}

export default compose()(App);

执行此操作：

import injectSaga from 'utils/injectSaga';

const key = 'app';

export function App() {
  return <div />;
}

const withSaga = injectSaga({ key, saga }); //this comes into play before the component loads

export default compose(withSaga)(App);

Source