jpgorman

export class LazyLoadModule extends React.component {
    ...
    async componentDidMount() {
        ...
        const { resolve } = this.props;
        const { default: module } = await resolve();
        const { name, reducers } = module;
        const { store } = this.context;
        if (name && store && reducers)
            store.registerDynamicModule({ name, reducers });

jpgorman

// my-module.js
export default {
    name: 'my-module',
    view,
    reducers,
}

jpgorman

export class LazyLoadModule extends React.component {
    ...
    async componentDidMount() {
        ...
        const {store} = this.context
    }
}

LazyLoadModule.contextTypes = {
    store: PropTypes.object,

jpgorman

import createStore from './store'

const rootReducer = {
    foo: fooReducer
}

const store = createStore(rootReducer)

const App = () => (
    <Provider store={store}>

jpgorman

// store.js
import * as redux form 'redux'

const { createStore,  combineReducers } = redux

// export our createStore function
export default reducerMap => {
    
    const injectAsyncReducers = (store, name, reducers) => {
        // add our new reducers under the name we provide

jpgorman

// my-module.js
import * as React from 'react'
import {connect} from 'react-redux'

const mapStateToProps = (state) => ({
    foo: state['my-module'].foo,
})
const view = connect(mapStateToProps)(({foo}) => <div>{foo}</div>)

const fooReducer = (state = 'Some Stuff') => {

jpgorman

// my-app.js

import {LazyLoadModule} from './LazyLoadModule'

const MyApp = () => (
    <div className='App'>
        <h1>Hello</h1>
        <LazyLoadModule resolve={() => import('./modules/my-module')} />
    </div>
)

jpgorman

import * as React from "react";

export class LazyLoadModule extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      module: null
    };
  }

jpgorman

async function getComponent() {
    const {default} = await import('./my-module')
    return React.createElement(default.view)
})

jpgorman

// my-module.js
import * as React from 'react'

export default {
    view: () => <div>My Modules View</div>
}