title: How to dynamically load reducers
body: <p>I have three mini-website within a site. I want the main reducer to store auth information. And, the respective mini-website to store it's own reducers. So, when one mini-site is browsed the respective template/component and reducers must be loaded. Note that, I am doing this as the stores among mini-sites are exhaustive</p>
  
  <p>similar to this <a href="http://github.com/insin/react-examples/tree/master/" rel="nofollow noreferrer">github repo</a>. This repo contains old react-router version. I want it to work with react-router-v4 and with <code>create-react-app</code></p>
  
  <p>How do I dynamically load reducers related to particular component when loading the Component dynamically?</p>
  
  <p>I am creating react project using <code>create-react-app</code> and these are the package versions</p>
  
  <pre><code>"react": "^16.3.1",
  "react-dom": "^16.3.1",
  "react-redux": "^5.0.7",
  "react-router-config": "^1.0.0-beta.4",
  "react-router-dom": "^4.2.2",
  "react-scripts": "1.1.4",
  "redux": "^3.7.2",
  "redux-thunk": "^2.2.0",
  </code></pre>
  
  <p>This is how I am dynamically loading component</p>
  
  <pre><code>class DynamicImport extends React.Component {
    state = { component: null };
    componentDidMount() {
      this.props
        .load()
        .then(module =&gt; this.setState(() =&gt; ({ component: module.default })));
    }
  
    render() {
      return this.props.children(this.state.component);
    }
  }
  
  const Admin = props =&gt; (
    &lt;DynamicImport
      load={() =&gt; import("../views/Admin")}
    &gt;
      {Component =&gt;
        Component === null ? &lt;div&gt;Loading&lt;/div&gt; : &lt;Component {...props} /&gt;
      }
    &lt;/DynamicImport&gt;
  );
  </code></pre>
  
  <p>and in render()</p>
  
  <pre><code>&lt;Route path="/admin" component={Admin} /&gt;
  </code></pre>
  
  <p>Is there an easier way to load/inject respective reducers when the component is rendered</p>