Update to redux-simple-router 2.

client/index.js

@@ -7,7 +7,7 @@ import configureStore from '../common/store/configureStore';
 import Root from '../common/views/Root';
 
 const history = createHashHistory({ queryKey: false });
-const store = configureStore(window.__INITIAL_STATE__);
+const store = configureStore(window.__INITIAL_STATE__, { history });
 const node = <Root history={history} store={store} />;
 const $target = document.getElementById('mount');
 

common/store/configureStore.dev.js

@@ -2,16 +2,28 @@ import {applyMiddleware, createStore, compose} from 'redux';
 import instance from './';
 import reducers from '../modules';
 import thunk from 'redux-thunk';
+import {syncHistory} from 'redux-simple-router';
 import DevTools from '../components/DevTools';
 
-export default function configureStore(initialState) {
+/**
+ * @param {object} initialState
+ * @param {object} drivers Used to inject dependencies
+ * @param {object} drivers.history History instance
+ */
+export default function configureStore(initialState, {history}) {
+  const reduxRouterMiddleware = syncHistory(history);
   const createStoreWithMiddleware = compose(
-    applyMiddleware(thunk),
+    applyMiddleware(thunk, reduxRouterMiddleware),
     DevTools.instrument()
   );
   const finalCreateStore = createStoreWithMiddleware(createStore);
   const store = finalCreateStore(reducers, initialState);
 
+  // Required for redux-simple-router to replay actions from devtools to work
+  if ( process.env.REDUX_DEVTOOLS ) {
+    reduxRouterMiddleware.listenForReplays(store);
+  }
+
   instance.set(store);
 
   return store;

common/store/configureStore.prod.js

@@ -2,10 +2,18 @@ import {applyMiddleware, createStore, compose} from 'redux';
 import instance from './';
 import reducers from '../modules';
 import thunk from 'redux-thunk';
+import {syncHistory} from 'redux-simple-router';
 
-export default function configureStore(initialState) {
-  const createStoreWithMiddleware = compose(
-    applyMiddleware(thunk)
+/**
+ * @param {object} initialState
+ * @param {object} drivers Used to inject dependencies
+ * @param {object} drivers.history History instance
+ */
+export default function configureStore(initialState, {history}) {
+  const reduxRouterMiddleware = syncHistory(history);
+  const createStoreWithMiddleware = applyMiddleware(
+    thunk,
+    reduxRouterMiddleware
   );
   const finalCreateStore = createStoreWithMiddleware(createStore);
   const store = finalCreateStore(reducers, initialState);

common/views/Root.dev.jsx

@@ -2,18 +2,11 @@ import React, { PropTypes } from 'react';
 
 import {Provider} from 'react-redux';
 import {Router} from 'react-router';
-import {syncReduxAndRouter} from 'redux-simple-router';
 import routes from '../routes';
 import Helmet from 'react-helmet';
 import DevTools from '../components/DevTools';
 
 class Root extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.bootstrapReduxRouter();
-  }
-
   render() {
     return (
       <div>
@@ -35,10 +28,6 @@ class Root extends React.Component {
   renderDevTools() {
     return _REDUX_DEVTOOLS_ ? <DevTools /> : null;
   }
-
-  bootstrapReduxRouter() {
-    syncReduxAndRouter(this.props.history, this.props.store);
-  }
 }
 
 Root.propTypes = {

common/views/Root.prod.jsx

@@ -2,17 +2,10 @@ import React, { PropTypes } from 'react';
 
 import {Provider} from 'react-redux';
 import {Router} from 'react-router';
-import {syncReduxAndRouter} from 'redux-simple-router';
 import routes from '../routes';
 import Helmet from 'react-helmet';
 
 class Root extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.bootstrapReduxRouter();
-  }
-
   render() {
     return (
       <div>
@@ -26,10 +19,6 @@ class Root extends React.Component {
       </div>
     );
   }
-
-  bootstrapReduxRouter() {
-    syncReduxAndRouter(this.props.history, this.props.store);
-  }
 }
 
 Root.propTypes = {

common/views/home/index.jsx

@@ -11,6 +11,8 @@ class HomeView extends React.Component {
   }
 
   render() {
+    console.log(this.props);
+
     return (
       <div>
         Clicks: {this.props.counter}
@@ -33,9 +35,7 @@ HomeView.propTypes = {
 };
 
 function mapStateToProps (state) {
-  return {
-    counter: state.counter
-  };
+  return state;
 }
 
 function mapDispatchToProps (dispatch) {

package.json

@@ -37,7 +37,7 @@
     "react-resolver": "^2.0.5",
     "react-router": "^1.0.0",
     "redux": "^3.0.4",
-    "redux-simple-router": "^1.0.2",
+    "redux-simple-router": "^2.0.3",
     "redux-thunk": "^1.0.0",
     "url-join": "0.0.1"
   },

server/middlewares/app.js

@@ -16,7 +16,7 @@ const htmlRegex = /\${html}/g;
 
 export default function *appMiddleware() {
   const history = createMemoryHistory();
-  const store = configureStore();
+  const store = configureStore(null, { history });
 
   match({ routes, location: this.request.url }, (err, redirect, props) => {
     if ( err ) {