0

I started using react-boilerplate for my project and I'm trying to figure out how routing works there. Could you please explain me this example in docs or example in app?

  • Why is getComponent() function so large relatively to simple react-router route definition <Route path='somepath' component={SomeContainer} />?
  • Why should we call injectReducers and injectSagas?

Thanks!

path: '/posts/:slug',
name: 'post',
getComponent(nextState, cb) {
 const importModules = Promise.all([
   import('containers/Post/reducer'),
   import('containers/Post/sagas'),
   import('containers/Post'),
 ]);

 const renderRoute = loadModule(cb);

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

 importModules.catch(errorLoading);
},
Yoihito
  • 348
  • 2
  • 13

1 Answers1

1

injectReducer and injectSagas are for code splitting. The code is saying "when this route is called, load these reducers and sagas". Webpack looks at that and splits code into different files accordingly.

Not really necessary if it's a small app, but if it's something huge, code splitting can be helpful to keep initial load times down.

BaronVonKaneHoffen
  • 1,902
  • 1
  • 21
  • 29
  • Thanks! Is it required to call these methods if I use reducers and sagas? – Yoihito Jun 09 '17 at 15:39
  • Yeah. Although you could refactor the whole file away from code splitting. I did this on a pet project of mine here: https://github.com/vonkanehoffen/wp-react/blob/master/app/routes.js – BaronVonKaneHoffen Jun 09 '17 at 15:41
  • I see. Actually, I like structure in your project more than default one in react-boilerplate. – Yoihito Jun 09 '17 at 15:46
  • I got the idea behind. Initially, we have some root reducer combined from other reducers. When we go to any route we have to add a new reducer to our root reducer and we do this with `injectReducer`. If we don't want to load reducers async we can import them in root reducer [reducers.js](https://github.com/react-boilerplate/react-boilerplate/blob/master/app/reducers.js). Am I correct? – Yoihito Jun 09 '17 at 16:02
  • Glad you like it! ... And yeah that would work. Think with big complex boilerplates like this it's important to not lose sight of the basics! – BaronVonKaneHoffen Jun 09 '17 at 16:29