Fractal React Applications

async-loader.jsx

import React from 'react';


export default class AsyncLoader extends React.Component {
  static propTypes = {
    load: propTypes.func.isRequired,
  };

  state = {
    error: null,
    routes: null,
    loading: true,
  };

  async componenDidMount() {
    try {
      const { routes, reducers } = await this.props.load();
      if (reducers) { 
        this.store.injectAll(reducers);
      }
      this.setState({ routes, loading: false });
    } catch (e) {
      this.error = e.toString();
    }
     
  }

  render() {
    if (this.state.loading) return <div>Loading...</div>;
    if (this.state.error) return <div>{this.state.error}</div>;
    return this.routes;
  }

}

Root.jsx

import { Provider } from 'react-redux';
import { Router } from 'react-router';
import React from 'react';
import AsyncLoader from './async-loader';


const MessagesApp = () => <AsyncLoader load={() => import('./messages')} />;
const SettingsApp = () => <AsyncLoader load={() => import('./settings')} />;


const Root = ({
  store,
  history,
}) => (
  <Provider store={store}>
    <Router history={history}>
      <Route path="/messages" component={MessagesApp} />
      <Route path="/setting" component={SettingsApp} />
    </Router>
  </Provider>
);

settings.jsx

export * from './reducers'; // Common reducers for this tree can be added here
import AsyncLoader from '../common/async-loader'; // reuses the same structure as the root to infinitely build sub applications

const SettingsHome = () => <AsyncLoader loader={() => import('./home')} />;
const AgencySettings = () => <AsyncLoader load={() => import('./settings')} />;

export const routes = (
  <div>
    <SettingsHome />
    <AgencySettings />
  </div>
);

store.js

import { createInjectableStore } from 'redux-injectable-store';
import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// add whatever middleware you normally would (this is an example)
const enhancer = applyMiddleware(
  thunk,
);

const store = createInjectableStore(
  {},
  enhancer,
});

export default store;