title: Dynamically load redux reducers with react router 4
body: <p>I'm splitting my code based on components and I want to inject my reducers only when a component loads, rather than stacking them all up from the start in the store. </p>
  
  <p>In react router 3 it was pretty straight forward but I can't seem to get it to work with react router 4.</p>
  
  <p>Here's the reducers and the store:</p>
  
  <p>reducers.js</p>
  
  <pre><code>import { combineReducers } from 'redux'
  import { routerReducer } from 'react-router-redux'
  
  import modalReducer from '../modules/modal'
  
  export default combineReducers({
    routing : routerReducer,
    modal   : modalReducer
  })
  </code></pre>
  
  <p>store.js</p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from 'redux'
  import { routerMiddleware } from 'react-router-redux'
  import thunk from 'redux-thunk'
  import createHistory from 'history/createBrowserHistory'
  import rootReducer from './reducers'
  
  export const history = createHistory()
  
  const initialState = {}
  const enhancers = []
  const middleware = [
    thunk,
    routerMiddleware(history)
  ]
  
  if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension
  
    if (typeof devToolsExtension === 'function') {
      enhancers.push(devToolsExtension())
    }
  }
  
  const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
  )
  
  const store = createStore(
    rootReducer(),
    initialState,
    composedEnhancers
  )
  export default store
  </code></pre>
  
  <p>And I'm using lazy load for the routes.</p>
  
  <p>How do I implement split reducers?</p>
  
  <p>I would like to inject the async reducers something like so:</p>
  
  <pre><code>function createReducer(asyncReducers) {
    return combineReducers({
      ...asyncReducers,
      system,
      router,
    })
  }
  
  function injectReducer(store, { key, reducer }) {
    if (Reflect.has(store.asyncReducers, key)) return
  
    store.asyncReducers[key] = reducer
    store.replaceReducer(createReducer(store.asyncReducers))
  }
  </code></pre>