React router redux fetch resources if needed on child routes
<p>I'm struggling to make this work, this is a common pattern I think but I haven't been able to see an example for this, or at a solution.</p>

<p>Here is the current route I am working on</p>

<pre><code>/app/services/10/
</code></pre>

<ul>
<li>in <code>app</code> fetch the current user’s login information</li>
<li>in <code>/services</code> fetches the list of services the user has available to them</li>
<li>in <code>/10</code> fetch fine grained details of Service 10</li>
</ul>

<p>So the way I do it to populate the <strong>store</strong> with some data is:</p>

<h3>App</h3>

<pre class="lang-js prettyprint-override"><code>import Services from './routes/Services'

export default (store) =&gt; ({
  path: 'main',
  getComponent (nextState, cb) {
    require.ensure([], require =&gt; {
      const App        = require('./containers/AppContainer').default,
            userActions = require('../store/user').actions
      store.dispatch(userActions.fetch())

      cb(null, App)
    }, 'app')
  },
  childRoutes: [
    Services(store)
  ]
})
</code></pre>

<h3>Services</h3>

<p>Now the problem lies within the childRoutes:</p>

<pre class="lang-js prettyprint-override"><code>import { injectReducer } from '../../../../store/reducers'
import Manage from './routes/Manage'

export default (store) =&gt; ({
  path: 'services',
  getComponent (nextState, cb) {
    require.ensure([], require =&gt; {
      const Services = require('./containers/ServicesContainer').default
      const actions      = require('./modules/services').actions
      const reducer      = require('./modules/services').default
      store.dispatch(actions.fetchAll())
      injectReducer(store, { key: 'services', reducer })
      cb(null, Services)
    })
  },
  childRoutes: [
    Manage(store)
  ]
})
</code></pre>

<p>As you can see the childRoute <code>Services</code> has a <code>fetchAll()</code> async request, that as you can imagine, needed some data from the <code>store</code>, specifically something from the <code>user</code> property in the store, like for example the userId or a token.</p>

<p>There wouldn't be a problem if I naturally navigate. But when I refresh, then the <code>user</code> prop hasn't been populated yet.</p>

<p>If you can't see how this is a problem, as part of my route:</p>

<p><code>app/services/10</code></p>

<p>The parameter <code>10</code> needed <strong>services</strong> from the <code>store</code>, </p>

<pre class="lang-js prettyprint-override"><code>export default (store) =&gt; ({
  path: ':id',
  getComponent ({params: {id}}, cb) {
    require.ensure([], require =&gt; {
      const Manage              = require('./containers/ManageContainer').default
      const ServicesActions = require('../../modules/integrations').actions
      store.dispatch(ServicesActions.selectService(id))
      cb(null, Manage)
    })
  }
})
</code></pre>

<p>Where <code>selectService</code> is just a function that filters out <code>state.services</code> </p>

<p>The problem is <code>services</code> is fetched asynchronously and when you refresh that route, the <code>store.dispatch</code> gets executed even before the <code>services</code> in the store has completed and populated the store?</p>

<p>How do I approach this async issue?</p>