upgrade(react-router-redux): ^3.0.0 -> ^4.0.0-beta

package.json

@@ -60,7 +60,7 @@
     "better-npm-run": "0.0.5",
     "co-request": "^1.0.0",
     "debug": "^2.2.0",
-    "history": "^2.0.0-rc2",
+    "history": "^2.0.0",
     "iconv-lite": "^0.4.13",
     "koa": "^2.0.0-alpha.3",
     "koa-connect-history-api-fallback": "^0.3.0",
@@ -70,7 +70,7 @@
     "react-dom": "^0.14.0",
     "react-redux": "^4.0.0",
     "react-router": "^2.0.0",
-    "react-router-redux": "^3.0.0",
+    "react-router-redux": "^4.0.0-beta",
     "redux": "^3.0.0",
     "redux-thunk": "^1.0.0",
     "url": "^0.11.0",

src/main.js

@@ -1,17 +1,29 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { browserHistory } from 'react-router'
+import { syncHistoryWithStore } from 'react-router-redux'
 import makeRoutes from './routes'
 import Root from './containers/Root'
 import configureStore from './redux/configureStore'
 
+// Create redux store and sync with react-router-redux. We have installed the
+// react-router-redux reducer under the key "router" in src/routes/index.js,
+// so we need to provide a custom `selectLocationState` to inform
+// react-router-redux of its location.
 const initialState = window.__INITIAL_STATE__
-const store = configureStore({ initialState, history })
+const store = configureStore(initialState)
+const history = syncHistoryWithStore(browserHistory, store, {
+  selectLocationState: (state) => state.router
+})
 
+// Now that we have the Redux store, we can create our routes. We provide
+// the store to the route definitions so that routes have access to it for
+// hooks such as `onEnter`.
 const routes = makeRoutes(store)
 
-// Render the React application to the DOM
+// Now that redux and react-router have been configured, we can render the
+// React application to the DOM!
 ReactDOM.render(
-  <Root history={browserHistory} routes={routes} store={store} />,
+  <Root history={history} routes={routes} store={store} />,
   document.getElementById('root')
 )

src/redux/configureStore.js

@@ -1,14 +1,10 @@
 import { applyMiddleware, compose, createStore } from 'redux'
-import { syncHistory } from 'react-router-redux'
 import thunk from 'redux-thunk'
 import rootReducer from './rootReducer'
 
-export default function configureStore ({ initialState = {}, history }) {
-  // Sync with router via history instance (main.js)
-  const routerMiddleware = syncHistory(history)
-
+export default function configureStore (initialState = {}) {
   // Compose final middleware and use devtools in debug environment
-  let middleware = applyMiddleware(thunk, routerMiddleware)
+  let middleware = applyMiddleware(thunk)
   if (__DEBUG__) {
     const devTools = window.devToolsExtension
       ? window.devToolsExtension()
@@ -18,7 +14,6 @@ export default function configureStore ({ initialState = {}, history }) {
 
   // Create final store and subscribe router in debug env ie. for devtools
   const store = middleware(createStore)(rootReducer, initialState)
-  if (__DEBUG__) routerMiddleware.listenForReplays(store, ({ router }) => router.location)
 
   if (module.hot) {
     module.hot.accept('./rootReducer', () => {

src/redux/rootReducer.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux'
-import { routeReducer as router } from 'react-router-redux'
+import { routerReducer as router } from 'react-router-redux'
 import counter from './modules/counter'
 
 export default combineReducers({