react-boilerplate: Question: Code splitting in combination with containers that don't have their own route

Hey,

I have a quick question on how we are meant to deal with containers that have their own reducers/sagas, but don’t have their own route.

Since reducers and sagas are loading async in routes injectReducer / injectSagas function, reducers and sagas of containers that don’t have their own routes, but are used in components that do have their own routes don’t get injected by default.

The boilerplate example app seems to solve this problem by just not using these kind of containers (ie all containers are routes), but that doesn’t seem to scale very well, and makes redux less useful from my pov.

The only solution to this I see is to manually add the reducers from the ‘subContainers’ into the routes.js, like that:

 {
      path: '/login',
      name: 'loginPage',
      getComponent (nextState, cb) {
        const importModules = Promise.all([
          System.import('containers/LoginPage/reducer'),
          System.import('containers/LoginPage/sagas'),
          System.import('containers/LoginPage'),
          // load other reducers that are needed in this route
          System.import('containers/SomeContainer/reducer'),
          System.import('containers/OtherContainer/reducer')
        ])

        const renderRoute = loadModule(cb)

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

        importModules.catch(errorLoading)
      }
    },

Does somebody have a better way / structure do deal with this?

Cheers, Simon

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 6
Comments: 18 (3 by maintainers)

Most upvoted comments

@vimniky @Augustin82 Yeah i have the same issue:

Parent saga: /client/(:clientid) Then i have to do a dispatch on component did mount:

  componentWillMount() {
    this.props.updateRouterState({
      params: this.props.params,
    });
  }

I do this so i can have my params in my saga (and kick of the saga).

and then i have a child container with path: ‘/client/1/companies’

Here i need that same param in this child saga. but if i do something like getSelectorRoute it would fail because my component is not mount yet or worse the parent-saga is not loaded yet.

So on container in my child ‘/client/1/companies’ i could componentDidMount this. But that doesn’t feel right.

Marinolinderhof on Oct 28, 2016

Personally I think it is safe to load reducers / sagas etc synchronously from the app/reducer.js unless there’s a strong reason not to.

So when I have some that don’t fit with this pattern usually I will just do that.

datapimp on Jun 15, 2016