refactor(*): upgrade react-router-redux v3 to v4 (adapt api changes)

Some breaking changes in the API of react-router-redux between v3 & v4 fixed - more on dvdzkwsk/react-redux-starter-kit@0df26907

Also upgraded following deps:

 react-redux     ^4.1.2  →  ^4.4.5
 react-router    ^2.0.0  →  ^2.2.4
 redux           ^3.1.7  →  ^3.4.0
 redux-devtools  ^3.0.2  →  ^3.2.0

Author: topheman

package.json

@@ -121,11 +121,11 @@
     "lscache": "^1.0.5",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "react-redux": "~4.1.2",
-    "react-router": "^2.0.0",
-    "react-router-redux": "^3.0.0",
-    "redux": "~3.1.7",
-    "redux-devtools": "~3.0.2",
+    "react-redux": "^4.1.2",
+    "react-router": "^2.2.4",
+    "react-router-redux": "^4.0.2",
+    "redux": "^3.1.7",
+    "redux-devtools": "^3.0.2",
     "redux-devtools-dock-monitor": "^1.0.1",
     "redux-devtools-log-monitor": "^1.0.1",
     "superagent": "^1.7.2",

src/bootstrap.js

@@ -4,6 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { Router, hashHistory } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
 import { Provider } from 'react-redux';
 
 import routes from './routes.js';
@@ -14,28 +15,25 @@ import configureStore from './redux/configure-store.js';
 import httpService from './services/httpService.js';
 httpService.getInstance();
 
+const initialState = {};
+
+/**
+ * The whole store/reducers/actions creators configuration is done inside configureStore
+ */
+const store = configureStore(initialState);
+
 /**
  * Router initialization
- * react-router-redux config is done in configure-store
- * If you switch from hashHistory to another, please update configure-store.js
+ * API has changed since react-router-redux v4 - checkout this commit for migration v3 -> v4: https://github.com/davezuko/react-redux-starter-kit/commit/0df26907
  */
+const syncedHistory = syncHistoryWithStore(hashHistory, store);
 
 const component = (
-  <Router history={hashHistory}>
+  <Router history={syncedHistory}>
     {routes}
   </Router>
 );
 
-const initialState = {};
-
-/**
- * The whole store/reducers/actions creators configuration is done inside configureStore
- * The configuration of the router is also done their since it's stored in redux store (using a specific reducer)
- */
-const store = configureStore(initialState);
-
-let rootElement = null;
-
 /**
  * The linter can be disabled via DISABLE_LINTER env var - show a message in console to inform if it's on or off
  * Won't show in production
@@ -49,6 +47,8 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
+let rootElement = null;
+
 /**
  * Thanks to webpack.DefinePlugin which lets you inject variables at transpile time,
  * everything inside the if statement will be dropped at minification if process.env.DEVTOOLS is set to false.

src/redux/configure-store.js

@@ -4,17 +4,10 @@
  * I added some comments to help understand the code
  */
 
-import { hashHistory } from 'react-router';// using the same as the one in bootstrap.js @todo find a way to inject it ?
 import { createStore, compose, applyMiddleware } from 'redux';
-import { syncHistory } from 'react-router-redux';
 
 import clientMiddleware from './middleware/clientMiddleware';
 
-/**
- * react-redux-router middleware setup
- */
-const reduxRouterMiddleware = syncHistory(hashHistory);
-
 /**
  * https://github.com/rackt/redux/blob/master/docs/Glossary.md#store-enhancer
  * Higher order function that compose a store creator and returns a new one: (StoreCreator) => (StoreCreator)
@@ -35,7 +28,7 @@ if (process.env.DEVTOOLS) {
  */
 const combinedCreateStore = compose(...storeEnhancers)(createStore);
 
-const middlewares = [clientMiddleware, reduxRouterMiddleware];
+const middlewares = [clientMiddleware];
 
 if (process.env.DEVTOOLS) {
   middlewares.push(require('./middleware/logger'));
@@ -64,10 +57,6 @@ export default function configureStore(initialState) {
    */
   const store = finalCreateStore(rootReducer, initialState);
 
-  if (process.env.DEVTOOLS) {
-    reduxRouterMiddleware.listenForReplays(store);
-  }
-
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
     module.hot.accept('./modules/reducer', () => {

src/redux/modules/reducer.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import { routeReducer } from 'react-router-redux';// the middleware part configuration of react-redux-router is done in configure-store.js
+import { routerReducer as routing } from 'react-router-redux';
 
 // reducers specific to app logic - to see an annotated reducer, open src/redux/modules/multipleUsers.js
 import counter from './counter.js';
@@ -11,7 +11,7 @@ import singleUser from './singleUser.js';
  * (including the reducer of the router, since we use redux-router and so the state of the router is in the store)
  */
 export default combineReducers({
-  routing: routeReducer,
+  routing,
   counter,
   multipleUsers,
   singleUser