lazyloaded react application POC

app.jsx

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import thunk from 'redux-thunk';

import router from './router';
import reducer from 'reducers/default';

window.NAMESPACE.store = createStore(
  combineReducers({ default: reducer }),
  applyMiddleware(thunk)
);

render(
  <Provider store={window.NAMESPACE.store}>{router}</Provider>,
  document.getElementById('root')
)

bootstrap.jsx

import React, { PropTypes } from 'react';

const App = (props) => (
  <section id="application">
    {props.children}
  </section>
);

App.propTypes = {
  children: PropTypes.node
};

export default App;

category.jsx

import React, { PropTypes } from 'react';

import Categories from 'components/categories';
import Featured from 'components/featured';

export default () => (
  <section className="page">
    <section id="categories"><Categories /></section>
    <section id="featured"><Featured /></section>
  </section>
);

lazyloader.js

import { applyMiddleware, createStore, combineReducers } from 'redux';
import thunk from 'redux-thunk';

function createReducer(store) {
  return combineReducers(store, applyMiddleware(thunk));
}

export default (err, callback, reducers, view) => {
  let ready = false;
  const store = {};

  reducers.forEach((reducer, idx) => {
    import(`reducers/${reducer}/index.js`).then((module) => {
      store[reducer] = module;

      if (++idx === reducers.length) {
        window.NAMESPACE.store.replaceReducer(createReducer(store));
        ready = true;
      }
    }).catch(err);
  });

  const lazy = setInterval(() => {
    if (!!ready) {
      clearInterval(lazy);
      import(`views/${view}.jsx`).then((module) => {
        return callback(null, module);
      }).catch(err);
    }
  }, 50);
};

router.js

import React from 'react';
import { Router, browserHistory } from 'react-router';

import bootstrap from 'views/bootstrap.jsx';
import lazyload from 'helpers/lazyloader';

function err(err) {
  console.error('Dynamic page loading failed', err);
}

const routes = {
  component: bootstrap,
  childRoutes: [
    {
      path: '/',
      getComponent(location, callback) {
        // lazyload args: error, callback, reducers array, view name
        lazyload(err, callback, ['category', 'featured'], 'category');
      }
    }
  ]
};

export default (
  <Router history={browserHistory} routes={routes} />
);