feat(*) upgrade [email protected] & react-router-redux

* Upgraded to latest version of react-router - fix #14
* Switched from redux-router to react-router-redux - fix #13
* This upgrade fixes #12 (problem when reloading a lazyly loaded route)

Author: topheman

package.json

@@ -96,17 +96,16 @@
   "dependencies": {
     "bootstrap-sass": "^3.3.5",
     "es6-promise": "^3.0.2",
-    "history": "^1.17.0",
     "lscache": "^1.0.5",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-redux": "~4.1.2",
-    "react-router": "^1.0.3",
+    "react-router": "^2.0.0",
+    "react-router-redux": "^3.0.0",
     "redux": "~3.1.7",
     "redux-devtools": "~3.0.2",
     "redux-devtools-dock-monitor": "^1.0.1",
     "redux-devtools-log-monitor": "^1.0.1",
-    "redux-router": "^1.0.0-beta7",
     "superagent": "^1.7.2",
     "superagent-mocker": "^0.3.0"
   },

src/bootstrap.js

@@ -3,7 +3,7 @@ global.Promise = global.Promise || require('es6-promise').Promise;
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { ReduxRouter } from 'redux-router';
+import { Router, hashHistory } from 'react-router';
 import { Provider } from 'react-redux';
 
 import routes from './routes.js';
@@ -14,12 +14,16 @@ import configureStore from './redux/configure-store.js';
 import httpService from './services/httpService.js';
 httpService.getInstance();
 
-/** Redux initialization */
+/**
+ * Router initialization
+ * react-router-redux config is done in configure-store
+ * If you switch from hashHistory to another, please update configure-store.js
+ */
 
 const component = (
-  <ReduxRouter>
+  <Router history={hashHistory}>
     {routes}
-  </ReduxRouter>
+  </Router>
 );
 
 const initialState = {};

src/containers/App/App.js

@@ -18,8 +18,8 @@ const App = ({ children }) => {
 };
 
 App.propTypes = {
-  routerState: React.PropTypes.object.isRequired,
+  routing: React.PropTypes.object.isRequired,
   children: React.PropTypes.node.isRequired
 };
 
-export default connect(state => ({ routerState: state.router }))(App);
+export default connect(state => ({ routing: state.routing }))(App);

src/redux/configure-store.js

@@ -4,35 +4,22 @@
  * 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 { reduxReactRouter } from 'redux-router';
-import createHashHistory from 'history/lib/createHashHistory';
-import clientMiddleware from './middleware/clientMiddleware';
+import { syncHistory } from 'react-router-redux';
 
-const createHistory = () => {
-  return createHashHistory({queryKey: 'hash'});
-};
+import clientMiddleware from './middleware/clientMiddleware';
 
-let combinedCreateStore;
+/**
+ * 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)
  */
-const storeEnhancers = [
-  reduxReactRouter({
-    createHistory,
-    routerStateSelector: state => ({
-      location: {
-        pathname: undefined
-      },
-      routes: [],
-      params: {},
-      components: [],
-      ...state.router
-    })
-  })
-];
+const storeEnhancers = [];
 
 /**
  * Only require then add devtools to the store-enhancer when needed
@@ -46,9 +33,9 @@ if (process.env.DEVTOOLS) {
  * Compose the store-enhancers with the original createStore function to create a new composed one.
  * Same as: combinedCreateStore = storeEnhancers[0](storeEnhancers[1](createStore))
  */
-combinedCreateStore = compose(...storeEnhancers)(createStore);
+const combinedCreateStore = compose(...storeEnhancers)(createStore);
 
-const middlewares = [clientMiddleware];
+const middlewares = [clientMiddleware, reduxRouterMiddleware];
 
 if (process.env.DEVTOOLS) {
   middlewares.push(require('./middleware/logger'));
@@ -77,6 +64,10 @@ 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 { routerStateReducer } from 'redux-router';
+import { routeReducer } from 'react-router-redux';// the middleware part configuration of react-redux-router is done in configure-store.js
 
 // 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({
-  router: routerStateReducer,
+  routing: routeReducer,
   counter,
   multipleUsers,
   singleUser