React-boilerplate 将 sagas 注入路由

Question

我正在使用react-boilerplate开发自学项目。

但是，我在将 sagas 注入 main routes.js

时遇到问题

routes.js

{
      path: '/',
      name: 'home',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/HomePage'),
          import('containers/NavigationContainer/reducer'),
          import('containers/NavigationContainer/sagas'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component, reducer, sagas]) => {
          injectReducer('navigationContainer', reducer.default);
          injectSagas('navigationContainer', sagas.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }

我有一个名为 Navigation 的组件和一个名为 NavigationContainer 的容器。

HomePage Container 这是主容器

import Navigation from '../../containers/NavigationContainer';

export default class HomePage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <NavigationContainer />
      </div>
    );
  }
}

错误如下：

Uncaught (in promise) Error: (app/utils...) injectAsyncSagas: Expected "sagas" to be an array of generator functions

我不知道问题出在哪里？已经搜索 github 但一无所获。

Answer 1

按照这个做法解决了我的问题

https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/js/redux-saga.md

React-boilerplate 将 sagas 注入路由

React-boilerplate injecting sagas to routes

javascript

reactjs

react-router

redux-saga

react-redux