react-router 4 & react-loadable & redial

Author: bertho-zero

.eslintrc

@@ -21,7 +21,7 @@
     "prefer-promise-reject-errors": "warn",
     "prefer-template": "warn",
     "react/forbid-prop-types": "warn",
-    "react/jsx-closing-tag-location": ["warn", "line-aligned"],
+    "react/jsx-closing-tag-location": "off",
     "react/jsx-filename-extension": "off",
     "react/jsx-no-target-blank": "warn",
     "react/no-multi-comp": ["error", {"ignoreStateless": true}],

README.md

@@ -134,7 +134,7 @@ We also spit out the `redux` state into a global `window.__data` variable in the
 
 #### Server-side Data Fetching
 
-The [redux-connect](https://www.npmjs.com/package/redux-connect) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redux-connect](https://www.npmjs.com/package/redux-connect) page.
+The [redial](https://www.npmjs.com/package/redial) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redial](https://www.npmjs.com/package/redial) page.
 
 #### Client Side
 

api/api.js

@@ -27,12 +27,14 @@ app
   }))
   .use(bodyParser.urlencoded({ extended: true }))
   .use(bodyParser.json())
+  // Core
   .configure(hooks())
   .configure(rest())
   .configure(socketio({ path: '/ws' }))
   .configure(auth)
   .use(actionHandler(app))
   .configure(services)
+  // Final handlers
   .use(notFound())
   .use(logger(app))
   .use(errorHandler({

api/middleware/actionHandler.js

@@ -14,29 +14,20 @@ export default function actionHandler(app) {
 
     req.app = app;
 
-    // TODO use next(error) instead of catchError ?
-    const catchError = async error => {
-      console.error('API ERROR:', pretty.render(error));
-      res.status(error.status || 500).json(error);
-    };
-
     if (action) {
       try {
-        try {
-          const result = await action(req, params);
-          if (result instanceof Function) {
-            result(res);
-          } else {
-            res.json(result);
-          }
-        } catch (reason) {
-          if (reason && reason.redirect) {
-            return res.redirect(reason.redirect);
-          }
-          return catchError(reason);
+        const result = await action(req, params);
+        if (result instanceof Function) {
+          result(res);
+        } else {
+          res.json(result);
         }
       } catch (error) {
-        return catchError(error);
+        if (error && error.redirect) {
+          return res.redirect(error.redirect);
+        }
+        console.error('API ERROR:', pretty.render(error));
+        res.status(error.status || 500).json(error);
       }
     } else {
       next();

package.json

@@ -1,7 +1,10 @@
 {
   "name": "react-redux-universal-hot-example",
   "description": "Example of an isomorphic (universal) webapp using react redux and hot reloading",
-  "author": "Erik Rasmussen <[email protected]> (http://github.com/erikras)",
+  "author": "Kévin Berthommier <[email protected]> (http://github.com/bertho-zero)",
+  "contributors": [
+    "Erik Rasmussen <[email protected]> (http://github.com/erikras)"
+  ],
   "license": "MIT",
   "version": "0.9.0",
   "repository": {
@@ -119,7 +122,7 @@
   },
   "dependencies": {
     "async": "^2.1.4",
-    "axios": "^0.16.2",
+    "axios": "^0.17.0",
     "babel-core": "^6.26.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-dynamic-import-node": "^1.1.0",
@@ -166,17 +169,19 @@
     "react-bootstrap": "^0.31.2",
     "react-dom": "^16.0.0",
     "react-helmet": "^5.0.3",
-    "react-loadable": "^5.2.2",
+    "react-loadable": "^5.3.0",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-bootstrap": "^0.24.4",
+    "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.6",
-    "react-router-scroll": "^0.4.1",
+    "recompose": "^0.26.0",
+    "redial": "^0.5.0",
     "redux": "^3.6.0",
-    "redux-auth-wrapper": "^1.0.0",
-    "redux-connect": "^6.0.0",
+    "redux-auth-wrapper": "^2.0.2",
     "redux-form": "^7.1.1",
+    "redux-logger": "^3.0.6",
     "redux-persist": "^4.8.3",
     "serialize-javascript": "^1.3.0",
     "serve-favicon": "^2.3.2",
@@ -215,7 +220,7 @@
     "less": "^3.0.0-alpha.3",
     "less-loader": "^4.0.3",
     "lighthouse": "^2.4.0",
-    "lint-staged": "^4.0.3",
+    "lint-staged": "^5.0.0",
     "mocha": "^4.0.1",
     "node-sass": "^4.5.0",
     "piping": "^1.0.0-rc.4",

src/app.js

@@ -1,5 +1,3 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import feathers from 'feathers/client';
 import hooks from 'feathers-hooks';
 import rest from 'feathers-rest/client';
@@ -42,20 +40,3 @@ export function createApp(req) {
 
   return configureApp(socketio(socket));
 }
-
-export function withApp(WrappedComponent) {
-  // eslint-disable-next-line react/prefer-stateless-function
-  class WithAppComponent extends Component {
-    static contextTypes = {
-      app: PropTypes.object.isRequired,
-      restApp: PropTypes.object.isRequired
-    };
-
-    render() {
-      const { app, restApp } = this.context;
-      return <WrappedComponent {...this.props} app={app} restApp={restApp} />;
-    }
-  }
-
-  return WithAppComponent;
-}

src/client.js

@@ -4,32 +4,33 @@
 import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
+import { renderRoutes } from 'react-router-config';
+import { trigger } from 'redial';
 import createBrowserHistory from 'history/createBrowserHistory';
 import Loadable from 'react-loadable';
-// import { bindActionCreators } from 'redux';
-// import { ReduxAsyncConnect } from 'redux-connect';
 import { AppContainer as HotEnabler } from 'react-hot-loader';
-// import { useScroll } from 'react-router-scroll';
 import { getStoredState } from 'redux-persist';
 import localForage from 'localforage';
 import { socket, createApp } from 'app';
-// import { Provider } from 'components';
-import createStore from './redux/create';
-import apiClient from './helpers/apiClient';
-import routes from './routes';
-import isOnline from './utils/isOnline';
-
-const offlinePersistConfig = {
+import createStore from 'redux/create';
+import apiClient from 'helpers/apiClient';
+import routes from 'routes';
+import isOnline from 'utils/isOnline';
+import asyncMatchRoutes from 'utils/asyncMatchRoutes';
+import { ReduxAsyncConnect, Provider } from 'components';
+
+const persistConfig = {
   storage: localForage,
-  whitelist: ['auth', 'info', 'chat'],
+  whitelist: ['auth', 'info', 'chat']
 };
 
-const client = apiClient();
+const dest = document.getElementById('content');
+
 const app = createApp();
 const restApp = createApp('rest');
-const dest = document.getElementById('content');
+const client = apiClient();
+const providers = { app, restApp, client };
 
 function initSocket() {
   socket.on('news', data => {
@@ -46,7 +47,7 @@ function initSocket() {
 global.socket = initSocket();
 
 (async () => {
-  const storedData = await getStoredState(offlinePersistConfig);
+  const storedData = await getStoredState(persistConfig);
   const online = await (window.__data ? true : isOnline());
 
   if (online) {
@@ -56,44 +57,41 @@ global.socket = initSocket();
 
   const history = createBrowserHistory();
   const data = !online ? { ...storedData, ...window.__data, online } : { ...window.__data, online };
-  const store = createStore(history, { client, app, restApp }, data, offlinePersistConfig);
-  // const history = syncHistoryWithStore(browserHistory, store);
-
-  // const redirect = bindActionCreators(replace, store.dispatch);
-  //
-  // const renderRouter = props => (
-  //   <ReduxAsyncConnect
-  //     {...props}
-  //     helpers={{
-  //       client,
-  //       app,
-  //       restApp,
-  //       redirect
-  //     }}
-  //     filter={item => !item.deferred}
-  //     render={applyRouterMiddleware(useScroll())}
-  //   />
-  // );
-
-  const hydrate = _routes => {
+  const store = createStore({
+    history,
+    data,
+    helpers: providers,
+    persistConfig
+  });
+
+  const hydrate = async _routes => {
+    const components = await asyncMatchRoutes(_routes, history.location.pathname);
+    await trigger('fetch', components, { store, ...providers });
+    await trigger('defer', components, { store, ...providers });
     ReactDOM.hydrate(
       <HotEnabler>
-        <Provider store={store}>
-          <ConnectedRouter history={history}>{_routes}</ConnectedRouter>
+        <Provider store={store} {...providers}>
+          <ConnectedRouter history={history}>
+            <ReduxAsyncConnect routes={_routes} store={store} helpers={providers}>
+              {renderRoutes(_routes)}
+            </ReduxAsyncConnect>
+          </ConnectedRouter>
         </Provider>
       </HotEnabler>,
-      dest,
+      dest
     );
   };
 
-  await Loadable.preloadReady().then(hydrated => console.log('HYDRATED', hydrated));
+  await Loadable.preloadReady();
 
-  hydrate(routes);
+  await hydrate(routes);
 
   if (module.hot) {
     module.hot.accept('./routes', () => {
       const nextRoutes = require('./routes');
-      hydrate(nextRoutes);
+      hydrate(nextRoutes).catch(err => {
+        console.error('Error on routes reload:', err);
+      });
     });
   }
 
@@ -102,7 +100,7 @@ global.socket = initSocket();
 
     if (!dest || !dest.firstChild || !dest.firstChild.attributes || !dest.firstChild.attributes['data-reactroot']) {
       console.error('Server-side React render was discarded.\n' +
-        'Make sure that your initial render does not contain any client-side code.');
+          'Make sure that your initial render does not contain any client-side code.');
     }
   }
 
@@ -114,7 +112,7 @@ global.socket = initSocket();
       <Provider store={store}>
         <DevTools />
       </Provider>,
-      devToolsDest,
+      devToolsDest
     );
   }