Question

我正在使用react-boilerplate，它在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);
      }
    }
  }

SPoints收到的道具如何传递给它？我在代码中看不到任何内容，这使得组件如何获得它的道具......

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

Answer 1

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

但是，路由器指向的组件将从react-router注入一些道具。

这里是一个react-boilerplate的示例容器。注意底部的连接函数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);

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

1 个答案: