add react-router-redux (#28)

Author: codeBelt

package.json

@@ -60,28 +60,29 @@
     "babel-preset-stage-2": "6.24.1",
     "babel-watch": "2.0.7",
     "concurrently": "3.5.0",
-    "copy-webpack-plugin": "4.1.0",
+    "copy-webpack-plugin": "4.1.1",
     "cross-env": "5.0.5",
-    "css-hot-loader": "1.3.1",
+    "css-hot-loader": "1.3.2",
     "css-loader": "0.28.7",
     "eslint": "4.8.0",
-    "eslint-config-airbnb": "15.1.0",
-    "eslint-config-airbnb-base": "12.0.1",
+    "eslint-config-airbnb": "16.0.0",
+    "eslint-config-airbnb-base": "12.0.2",
     "eslint-plugin-filenames": "1.2.0",
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-jsx-a11y": "6.0.2",
     "eslint-plugin-react": "7.4.0",
-    "extract-text-webpack-plugin": "3.0.0",
+    "extract-text-webpack-plugin": "3.0.1",
     "html-webpack-harddisk-plugin": "0.1.0",
     "html-webpack-plugin": "2.30.1",
+    "history": "4.7.2",
     "nodemon": "1.12.1",
     "postcss-apply": "0.8.0",
     "postcss-cssnext": "3.0.2",
     "postcss-import": "11.0.0",
     "postcss-loader": "2.0.6",
     "rimraf": "2.6.2",
     "robotstxt-webpack-plugin": "2.0.0",
-    "style-loader": "0.18.2",
+    "style-loader": "0.19.0",
     "webpack-dev-middleware": "1.12.0",
     "webpack-hot-middleware": "2.19.1",
     "webpack-simple-progress-plugin": "0.0.2"
@@ -103,9 +104,10 @@
     "react-redux": "5.0.6",
     "react-router": "4.2.0",
     "react-router-dom": "4.2.2",
+    "react-router-redux": "next",
     "redux": "3.7.2",
     "redux-devtools-extension": "2.13.2",
-    "redux-form": "7.0.4",
+    "redux-form": "7.1.0",
     "redux-saga": "0.15.6",
     "serialize-javascript": "1.4.0",
     "webpack": "3.6.0"

src/RouterWrapper.jsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import {Provider} from 'react-redux';
-import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
+import {ConnectedRouter} from 'react-router-redux';
+import {createMemoryHistory} from 'history';
 import {StaticRouter} from 'react-router';
+import {Route, Switch, Redirect} from 'react-router-dom';
 import AboutAsync from './views/about/AboutAsync';
 import Home from './views/home/Home';
 import Contact from './views/contact/Contact';
@@ -10,13 +12,16 @@ import Header from './views/landmarks/Header';
 import NotFoundAsync from './views/errors/NotFoundAsync';
 
 const RouterWrapper = (props) => {
-    const Router = props.isServerSide ? StaticRouter : BrowserRouter;
+    const Router = props.isServerSide ? StaticRouter : ConnectedRouter;
+    const history = props.isServerSide ? createMemoryHistory() : props.history;
 
     return (
         <Provider store={props.store}>
             <Router
                 context={props.context}
                 location={props.location}
+                history={history}
+
             >
                 <div className="container">
                     <Header />

src/client.jsx

@@ -2,22 +2,26 @@ import 'bootstrap/dist/css/bootstrap.css';
 import './assets/styles/styles.css';
 
 import 'fetch-everywhere';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {createBrowserHistory} from 'history';
 import {AppContainer as ReactHotLoader} from 'react-hot-loader';
 import {AsyncComponentProvider} from 'react-async-component';
 import asyncBootstrapper from 'react-async-bootstrapper';
-import React from 'react';
-import ReactDOM from 'react-dom';
 import RouterWrapper from './RouterWrapper';
 import ProviderService from './services/ProviderService';
 
 const codeSplittingState = window.__ASYNC_COMPONENTS_STATE__;
+const serverState = window.__STATE__;
 const initialState = {
-    ...window.__STATE__,
+    ...serverState,
     renderReducer: {
+        ...serverState.renderReducer,
         isServerSide: false,
     },
 };
-const store = ProviderService.createProviderStore(initialState);
+const history: History = createBrowserHistory();
+const store = ProviderService.createProviderStore(initialState, history);
 const rootEl = document.getElementById('root');
 
 delete window.__STATE__;
@@ -26,7 +30,7 @@ delete window.__ASYNC_COMPONENTS_STATE__;
 const composeApp = (Component) => (
     <ReactHotLoader key={Math.random()}>
         <AsyncComponentProvider rehydrateState={codeSplittingState}>
-            <Component store={store} />
+            <Component store={store} history={history} />
         </AsyncComponentProvider>
     </ReactHotLoader>
 );

src/server/controllers/ReactController.jsx

@@ -18,7 +18,7 @@ class ReactController {
             method: 'GET',
             path: '/{route*}',
             handler: async (request, reply) => {
-                const store = ProviderService.createProviderStore({}, true);
+                const store = ProviderService.createProviderStore({}, null, true);
                 const asyncContext = createAsyncContext();
                 const routeContext = {};
                 const app = (

src/services/ProviderService.js

@@ -1,18 +1,22 @@
 import {createStore, applyMiddleware} from 'redux';
+import {routerMiddleware} from 'react-router-redux';
 import rootReducer from '../stores/rootReducer';
 import {composeWithDevTools} from 'redux-devtools-extension/developmentOnly';
 import createSagaMiddleware, {END} from 'redux-saga';
 import rootSaga from '../stores/rootSaga';
 
 class ProviderService {
 
-    static createProviderStore(initialState = {}, isServerSide = false) {
+    static createProviderStore(initialState = {}, history = null, isServerSide = false) {
         const sagaMiddleware = createSagaMiddleware();
 
         const store = createStore(
             rootReducer,
             initialState,
-            composeWithDevTools(applyMiddleware(sagaMiddleware)),
+            composeWithDevTools(applyMiddleware(
+                sagaMiddleware,
+                routerMiddleware(history),
+            )),
         );
 
         if (isServerSide) {

src/stores/rootReducer.js

@@ -1,16 +1,18 @@
 import {combineReducers} from 'redux';
+import {routerReducer} from 'react-router-redux';
 import UserReducer from './user/UserReducer';
 import LoadingReducer from './loading/LoadingReducer';
 import MetaReducer from './meta/MetaReducer';
 import {reducer as formReducer} from 'redux-form';
 import RenderReducer from './render/RenderReducer';
 
-const rootReducer = combineReducers({
+const reducers = {
     form: formReducer,
     loadingReducer: LoadingReducer.reduce,
     metaReducer: MetaReducer.reduce,
     renderReducer: RenderReducer.reduce,
     userReducer: UserReducer.reduce,
-});
+    router: routerReducer,
+};
 
-export default rootReducer;
+export default combineReducers(reducers);