Passing props to components when using async routing

Question

I'm using react-boilerplate which uses asynchronous calls in it's route.js to supply components.

The component that loads in the '/' path is defined as:

const SPoints = ({ actions, loading, error, regions, selectedRegion, region, regionLoading }) => {

and the component is populated with values from these e.g. region.name, etc.

The routing code is:

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

How are the props that SPoints receives being passed to it? I see nothing in the code that makes it evident how the component gets it's props...

Hmmm. I'm now thinking that the sagas.js being imported is setting values in the redux store but I still don't see how those props are passed.

James Ganong James Ganong · Accepted Answer · 2017-03-11T02:33:30

In short, the connect higher order component from react-redux is providing those props from the redux store.

However, the components the router points to will be injected with some props from react-router.

Here's a look at one of react-boilerplate's example containers. Notice the connect function at the bottom with mapStateToProps and mapDispatchToProps which does exactly what it sounds like: maps state and dispatch actions to the props on the component being connected [to redux's store].

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

Passing props to components when using async routing

1 Answers