Udpate react-router-redux

client/index.js

@@ -3,7 +3,11 @@ import Rx from 'rx';
 import React from 'react';
 import debug from 'debug';
 import { Router } from 'react-router';
-import { routeReducer as routing, syncHistory } from 'react-router-redux';
+import {
+  routerMiddleware,
+  routerReducer as routing,
+  syncHistoryWithStore
+} from 'react-router-redux';
 import { render } from 'redux-epic';
 import { createHistory } from 'history';
 
@@ -33,10 +37,9 @@ initialState.app.csrfToken = csrfToken;
 const serviceOptions = { xhrPath: '/services', context: { _csrf: csrfToken } };
 
 const history = createHistory();
-const routingMiddleware = syncHistory(history);
 
 const devTools = window.devToolsExtension ? window.devToolsExtension() : f => f;
-const shouldRouterListenForReplays = !!window.devToolsExtension;
+const adjustUrlOnReplay = !!window.devToolsExtension;
 
 const sagaOptions = {
   isDev,
@@ -48,19 +51,17 @@ const sagaOptions = {
 
 createApp({
     history,
+    syncHistoryWithStore,
+    syncOptions: { adjustUrlOnReplay },
     serviceOptions,
     initialState,
-    middlewares: [ routingMiddleware ],
+    middlewares: [ routerMiddleware(history) ],
     sagas: [...sagas ],
     sagaOptions,
     reducers: { routing },
     enhancers: [ devTools ]
   })
   .doOnNext(({ store }) => {
-    if (shouldRouterListenForReplays && store) {
-      log('routing middleware listening for replays');
-      routingMiddleware.listenForReplays(store);
-    }
     if (module.hot && typeof module.hot.accept === 'function') {
       module.hot.accept('../common/app', function() {
         saveToColdStorage(store.getState());

common/app/create-app.jsx

@@ -23,6 +23,7 @@ const routes = { components: App, ...childRoutes };
 // createApp(settings: {
 //   location?: Location|String,
 //   history?: History,
+//   syncHistoryWithStore?: ((history, store) => history) = (x) => x,
 //   initialState?: Object|Void,
 //   serviceOptions?: Object,
 //   middlewares?: Function[],
@@ -35,6 +36,8 @@ const routes = { components: App, ...childRoutes };
 export default function createApp({
   location,
   history,
+  syncHistoryWithStore = (x) => x,
+  syncOptions = {},
   initialState,
   serviceOptions = {},
   middlewares: sideMiddlewares = [],
@@ -69,6 +72,9 @@ export default function createApp({
   // call enhanced createStore function with reducer and initialState
   // to create store
   const store = compose(...enhancers)(createStore)(reducer, initialState);
+  // sync history client side with store.
+  // server side this is an identity function and history is undefined
+  history = syncHistoryWithStore(history, store, syncOptions);
 
   // createRouteProps({
   //   redirect: LocationDescriptor,

package.json

@@ -93,7 +93,7 @@
     "react-redux": "^4.0.6",
     "react-router": "^2.0.0",
     "react-router-bootstrap": "~0.23.1",
-    "react-router-redux": "^2.1.0",
+    "react-router-redux": "^4.0.5",
     "react-toastr": "^2.4.0",
     "react-youtube": "^6.1.0",
     "redux": "^3.0.5",
@@ -154,7 +154,7 @@
     "sinon": "^1.17.3",
     "sort-keys": "^1.1.1",
     "tap-spec": "^4.1.1",
-    "tape": "^4.2.2"
+    "tape": "^4.2.2",
     "webpack": "^1.9.12",
     "webpack-dev-server": "^1.14.0",
     "webpack-manifest-plugin": "^1.0.0",