How to dynamically load reducers

Question

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

similar to this github repo. This repo contains old react-router version. I want it to work with react-router-v4 and with create-react-app

How do I dynamically load reducers related to particular component when loading the Component dynamically?

I am creating react project using create-react-app and these are the package versions

"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",

This is how I am dynamically loading component

class DynamicImport extends React.Component {
  state = { component: null };
  componentDidMount() {
    this.props
      .load()
      .then(module => this.setState(() => ({ component: module.default })));
  }

  render() {
    return this.props.children(this.state.component);
  }
}

const Admin = props => (
  <DynamicImport
    load={() => import("../views/Admin")}
  >
    {Component =>
      Component === null ? <div>Loading</div> : <Component {...props} />
    }
  </DynamicImport>
);

and in render()

<Route path="/admin" component={Admin} />

Is there an easier way to load/inject respective reducers when the component is rendered

Answer 1

as @lustoykov suggested, the way to load reducers dynamically is by store.replaceReducer(configureReducers(reducer))

This, easy to follow article explains how to setup dynamic reducers in detail. https://tylergaw.com/articles/dynamic-redux-reducers/

Here is my github repo with a completed solution. It follows the steps as given in article. https://github.com/sabbiu/dynamic-reducers-for-react/