使用异步路由时将道具传递给组件-Java 学习之路

我'm using react-boilerplate which uses asynchronous calls in it' s 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商店中设置值，但我仍然看不到这些道具是如何传递的 .

1 回答

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

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

这里是_660239的示例容器 . 注意底部的连接函数 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);

回复于 2024-05-03T08:48:04+08:00

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

1 回答

相关问题