使用异步路由时向组件传递道具

Question

我正在使用react样板文件，它在route.js中使用异步调用来提供组件。

在“/”路径中加载的组件定义为：

const SPoints=（{actions，loading，error，regions，selectedRegion，region，regionLoading}）=

组件中填充了这些值，例如region.name等。

路由代码为：

const getRootComponent = (nextState, cb) => {
  import('containers/App')
    .then(loadModule(cb))
    .catch(errorLoading);
}

export default function createRoutes(store) {
  // create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store);

  return [{
    path: '/',
    name: 'SPoints',
    getComponent(nextState, cb) {
      getRootComponent(nextState, cb);
    },
    indexRoute: {
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/SPoints/reducer'),
          import('containers/SPoints/sagas'),
          import('containers/SPoints'),
        ]);

        const renderRoute = loadModule(cb);

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

          renderRoute(component);
        });

        importModules.catch(errorLoading);
      }
    }
  }

SPoint收到的道具是如何传递给它的？我在代码中没有看到任何明显的组件是如何得到它的道具的...

嗯。我现在认为正在导入的sagas.js正在redux商店中设置值，但我仍然不知道这些道具是如何传递的。




Answer 1

简而言之，来自react-redux的连接高阶组件正在提供来自redux商店的那些道具。

然而，路由器指向的组件将被注入一些来自反应路由器的道具。

下面是一个react-boiler板的示例容器。请注意底部带有mapStateToProps和mapDispatchToProps的连接函数，它做的正是它听起来像的事情：将状态映射到正在连接[到redux的商店]的组件上的道具，并将操作分派到道具。

https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/HomePage/index.js#L121

export function mapDispatchToProps(dispatch) {
  return {
    onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)),
    onSubmitForm: (evt) => {
      if (evt !== undefined && evt.preventDefault) evt.preventDefault();
      dispatch(loadRepos());
    },
  };
}

const mapStateToProps = createStructuredSelector({
  repos: makeSelectRepos(),
  username: makeSelectUsername(),
  loading: makeSelectLoading(),
  error: makeSelectError(),
});

// Wrap the component to inject dispatch and state into it
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);