Redux with router (#10)

* add react-router-redux

* change createBrowserHistory back to createMemoryHistory for server

* update dependencies

Author: codeBelt

package.json

@@ -49,18 +49,20 @@
   "devDependencies": {
     "@types/fs-extra": "4.0.2",
     "@types/hapi": "16.1.10",
+    "@types/history": "4.6.0",
     "@types/inert": "4.2.3",
-    "@types/node": "8.0.31",
+    "@types/node": "8.0.33",
     "@types/node-notifier": "0.0.28",
-    "@types/react": "16.0.7",
+    "@types/react": "16.0.10",
     "@types/react-dom": "15.5.5",
     "@types/react-hot-loader": "3.0.4",
-    "@types/react-redux": "5.0.9",
+    "@types/react-redux": "5.0.10",
     "@types/react-router": "4.0.15",
     "@types/react-router-dom": "4.0.8",
-    "@types/redux-form": "7.0.5",
+    "@types/react-router-redux": "5.0.8",
+    "@types/redux-form": "7.0.6",
     "@types/serialize-javascript": "1.3.1",
-    "@types/webpack": "3.0.12",
+    "@types/webpack": "3.0.13",
     "@types/webpack-env": "1.13.1",
     "awesome-typescript-loader": "3.2.3",
     "babel-cli": "6.26.0",
@@ -75,11 +77,11 @@
     "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",
-    "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",
     "nodemon": "1.12.1",
@@ -89,7 +91,7 @@
     "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",
     "tslib": "1.7.1",
     "tslint": "5.7.0",
     "tslint-react": "3.2.0",
@@ -105,6 +107,7 @@
     "fs-extra": "4.0.2",
     "hapi": "16.6.2",
     "hapi-webpack-plugin": "2.0.0",
+    "history": "4.7.2",
     "inert": "4.2.1",
     "node-notifier": "5.1.2",
     "react": "16.0.0",
@@ -115,9 +118,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.tsx

@@ -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 {History, 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';
@@ -16,16 +18,19 @@ interface IProviderWrapperProps {
     isServerSide: boolean;
     location?: string;
     context?: any;
+    history?: History;
 }
 
 const RouterWrapper: React.StatelessComponent<IProviderWrapperProps> = (props: IProviderWrapperProps): JSX.Element  => {
-    const Router: any = props.isServerSide ? StaticRouter : BrowserRouter;
+    const Router: any = props.isServerSide ? StaticRouter : ConnectedRouter;
+    const history: 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.tsx

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

src/server/controllers/ReactController.tsx

@@ -22,7 +22,7 @@ class ReactController implements IController {
             method: 'GET',
             path: '/{route*}',
             handler: async (request: Hapi.Request, reply: Hapi.ReplyNoContinue): Promise<void> => {
-                const store: ISagaStore<IStore> = ProviderService.createProviderStore({}, true);
+                const store: ISagaStore<IStore> = ProviderService.createProviderStore({}, null, true);
                 const asyncContext: any = createAsyncContext();
                 const routeContext: any = {};
                 const app = (

src/services/ProviderService.ts

@@ -1,4 +1,6 @@
 import {createStore, applyMiddleware} from 'redux';
+import {routerMiddleware} from 'react-router-redux';
+import {History} from 'history';
 import rootReducer from '../stores/rootReducer';
 import {composeWithDevTools} from 'redux-devtools-extension/developmentOnly';
 import createSagaMiddleware, {END, SagaMiddleware} from 'redux-saga';
@@ -8,13 +10,16 @@ import ISagaStore from '../stores/ISagaStore';
 
 class ProviderService {
 
-    public static createProviderStore(initialState: any = {}, isServerSide: boolean = false): ISagaStore<IStore> {
+    public static createProviderStore(initialState: any = {}, history: History = null, isServerSide: boolean = false): ISagaStore<IStore> {
         const sagaMiddleware: SagaMiddleware<any> = createSagaMiddleware();
 
         const store = createStore(
             rootReducer,
             initialState,
-            composeWithDevTools(applyMiddleware(sagaMiddleware)),
+            composeWithDevTools(applyMiddleware(
+                sagaMiddleware,
+                routerMiddleware(history),
+            )),
         ) as ISagaStore<IStore>;
 
         if (isServerSide) {
@@ -29,7 +34,7 @@ class ProviderService {
         return store;
     }
 
-    private static _setupHotReloading(store: ISagaStore<IStore>) {
+    private static _setupHotReloading(store: ISagaStore<IStore>): void {
         if (module.hot) {
             module.hot.accept('../stores/rootReducer', () => {
                 const nextReducer = require('../stores/rootReducer').default; // tslint:disable-line:no-require-imports

src/stores/IStore.ts

@@ -1,3 +1,5 @@
+import {RouterState} from 'react-router-redux';
+import {Reducer} from 'redux';
 import {FormReducer} from 'redux-form';
 import ILoadingReducerState from './loading/ILoadingReducerState';
 import IMetaReducerState from './meta/IMetaReducerState';
@@ -10,6 +12,7 @@ interface IStore {
     readonly metaReducer: IMetaReducerState;
     readonly renderReducer: IRenderReducerState;
     readonly userReducer: IUserReducerState;
+    readonly router: Reducer<RouterState>;
 }
 
 export default IStore;

src/stores/rootReducer.ts

@@ -1,4 +1,5 @@
 import {combineReducers, Reducer} from 'redux';
+import {routerReducer} from 'react-router-redux';
 import UserReducer from './user/UserReducer';
 import LoadingReducer from './loading/LoadingReducer';
 import MetaReducer from './meta/MetaReducer';
@@ -12,6 +13,7 @@ const reducers: IStore = {
     metaReducer: MetaReducer.reduce as any,
     renderReducer: RenderReducer.reduce as any,
     userReducer: UserReducer.reduce as any,
+    router: routerReducer,
 };
 
 export default combineReducers<IStore>(reducers as any) as Reducer<IStore>;