Split history syncing from action creators

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["es2015", "stage-2"]
+    "presets": ["es2015", "stage-1"]
 }

.gitignore

@@ -1,3 +1,4 @@
 lib
 node_modules
 coverage
+*.log

examples/basic/app.js

@@ -4,20 +4,17 @@ import DockMonitor from 'redux-devtools-dock-monitor'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
+import { createStore, combineReducers } from 'redux'
 import { Provider } from 'react-redux'
-import { Router, Route, IndexRoute } from 'react-router'
-import createHistory from 'history/lib/createHashHistory'
-import { syncHistory, routeReducer } from 'react-router-redux'
+import { Router, Route, IndexRoute, hashHistory } from 'react-router'
+import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
 
 import * as reducers from './reducers'
 import { App, Home, Foo, Bar } from './components'
 
-const history = createHistory()
-const middleware = syncHistory(history)
 const reducer = combineReducers({
   ...reducers,
-  routing: routeReducer
+  routing: routerReducer
 })
 
 const DevTools = createDevTools(
@@ -27,12 +24,11 @@ const DevTools = createDevTools(
   </DockMonitor>
 )
 
-const finalCreateStore = compose(
-  applyMiddleware(middleware),
+const store = createStore(
+  reducer,
   DevTools.instrument()
-)(createStore)
-const store = finalCreateStore(reducer)
-middleware.listenForReplays(store)
+)
+const history = syncHistoryWithStore(hashHistory, store)
 
 ReactDOM.render(
   <Provider store={store}>

examples/basic/components/App.js

@@ -1,9 +1,7 @@
 import React from 'react'
-import { Link } from 'react-router'
-import { connect } from 'react-redux'
-import { routeActions } from 'react-router-redux'
+import { Link, hashHistory } from 'react-router'
 
-function App({ push, children }) {
+export default function App({ children }) {
   return (
     <div>
       <header>
@@ -16,14 +14,9 @@ function App({ push, children }) {
         <Link to="/bar">Bar</Link>
       </header>
       <div>
-        <button onClick={() => push('/foo')}>Go to /foo</button>
+        <button onClick={() => hashHistory.push('/foo')}>Go to /foo</button>
       </div>
       <div style={{ marginTop: '1.5em' }}>{children}</div>
     </div>
   )
 }
-
-export default connect(
-  null,
-  routeActions
-)(App)

examples/basic/package.json

@@ -4,28 +4,27 @@
   "repository": "rackt/react-router-redux",
   "license": "MIT",
   "dependencies": {
-    "history": "^1.14.0",
-    "react": "^0.14.2",
-    "react-dom": "^0.14.2",
-    "react-redux": "^4.0.0",
-    "react-router": "^1.0.0",
-    "redux": "^3.0.4",
-    "react-router-redux": "^2.1.0"
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.3.0",
+    "react-router": "^2.0.0-rc5",
+    "redux": "^3.2.1",
+    "react-router-redux": "^3.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.1.21",
-    "babel-eslint": "^5.0.0-beta6",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^5.0.0-beta9",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "babel-preset-stage-1": "^6.3.13",
     "eslint": "^1.10.3",
     "eslint-config-rackt": "^1.1.1",
-    "eslint-plugin-react": "^3.15.0",
-    "redux-devtools": "^3.0.0",
+    "eslint-plugin-react": "^3.16.1",
+    "redux-devtools": "^3.1.0",
     "redux-devtools-dock-monitor": "^1.0.1",
-    "redux-devtools-log-monitor": "^1.0.1",
-    "webpack": "^1.12.6"
+    "redux-devtools-log-monitor": "^1.0.4",
+    "webpack": "^1.12.13"
   },
   "scripts": {
     "start": "webpack --watch"

karma.conf.js

@@ -1,12 +1,13 @@
-var path = require('path');
-var webpack = require('webpack');
+'use strict'
+
+const path = require('path')
 
 module.exports = function (config) {
 
-  var runCoverage = process.env.COVERAGE === 'true';
+  let runCoverage = process.env.COVERAGE === 'true'
 
-  var coverageLoaders = [];
-  var coverageReporters = [];
+  let coverageLoaders = []
+  let coverageReporters = []
 
   if (runCoverage) {
     coverageLoaders.push({
@@ -15,7 +16,7 @@ module.exports = function (config) {
       loader: 'isparta'
     }),
 
-    coverageReporters.push('coverage');
+    coverageReporters.push('coverage')
   }
 
   config.set({
@@ -39,12 +40,14 @@ module.exports = function (config) {
       module: {
         preLoaders: [
           {
+            loader: 'babel',
             test: /\.js$/,
-            exclude: [
-              path.resolve('node_modules/')
-            ],
-            loader: 'babel'
-          },
+            include: [
+              path.resolve('src/'),
+              path.resolve('test/')
+            ]
+
+          }
         ].concat(coverageLoaders)
       }
     },
@@ -59,5 +62,5 @@ module.exports = function (config) {
         { type: 'json', subdir: 'browser-coverage', file: 'coverage.json' }
       ]
     }
-  });
-};
+  })
+}

package.json

@@ -16,10 +16,10 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "mkdir -p lib && babel ./src/index.js --out-file ./lib/index.js",
+    "build": "mkdir -p lib && babel ./src -d lib",
     "lint": "eslint examples src test",
     "test": "npm run lint && npm run test:node && npm run test:browser",
-    "test:node": "mocha --compilers js:babel-core/register --recursive ./test/node",
+    "test:node": "mocha --compilers js:babel-register --recursive ./test/node",
     "test:browser": "karma start",
     "test:cov": "npm run test:cov:browser && npm run test:cov:node && npm run test:cov:report",
     "test:cov:node": "babel-node $(npm bin)/isparta cover $(npm bin)/_mocha report --dir ./coverage/node-coverage -- --recursive ./test/node",
@@ -41,13 +41,14 @@
     "babel-core": "^6.2.1",
     "babel-eslint": "^4.1.6",
     "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.2",
-    "babel-preset-stage-2": "^6.3.13",
+    "babel-polyfill": "^6.3.14",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-stage-1": "^6.3.13",
+    "babel-register": "^6.4.3",
     "eslint": "^1.10.3",
     "eslint-config-rackt": "^1.1.1",
     "eslint-plugin-react": "^3.15.0",
     "expect": "^1.13.0",
-    "history": "^1.14.0",
     "isparta": "^4.0.0",
     "isparta-loader": "^2.0.0",
     "karma": "^0.13.3",
@@ -62,6 +63,7 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
     "react": "^0.14.3",
+    "react-router": "^2.0.0-rc5",
     "redux": "^3.0.4",
     "redux-devtools": "^3.0.0",
     "redux-devtools-dock-monitor": "^1.0.1",

src/actions.js

@@ -0,0 +1,26 @@
+/**
+ * This action type will be dispatched by the history actions below.
+ * If you're writing a middleware to watch for navigation events, be sure to
+ * look for actions of this type.
+ */
+export const UPDATE_LOCATION = '@@router/UPDATE_LOCATION'
+
+function updateLocation(method) {
+  return (...args) => ({
+    type: UPDATE_LOCATION,
+    payload: { method, args }
+  })
+}
+
+/**
+ * These actions correspond to the history API.
+ * The associated routerMiddleware will capture these events before they get to
+ * your reducer and reissue them as the matching function on your history.
+ */
+export const push = updateLocation('push')
+export const replace = updateLocation('replace')
+export const go = updateLocation('go')
+export const goBack = updateLocation('goBack')
+export const goForward = updateLocation('goForward')
+
+export const routeActions = { push, replace, go, goBack, goForward }

src/index.js

@@ -1,112 +1,9 @@
-// Constants
-
-export const TRANSITION = '@@router/TRANSITION'
-export const UPDATE_LOCATION = '@@router/UPDATE_LOCATION'
-
-const SELECT_LOCATION = state => state.routing.location
-
-function transition(method) {
-  return (...args) => ({
-    type: TRANSITION,
-    payload: { method, args }
-  })
-}
-
-export const push = transition('push')
-export const replace = transition('replace')
-export const go = transition('go')
-export const goBack = transition('goBack')
-export const goForward = transition('goForward')
-
-export const routeActions = { push, replace, go, goBack, goForward }
-
-function updateLocation(location) {
-  return {
-    type: UPDATE_LOCATION,
-    payload: location
-  }
-}
-
-// Reducer
-
-const initialState = {
-  location: undefined
-}
-
-export function routeReducer(state = initialState, { type, payload: location }) {
-  if (type !== UPDATE_LOCATION) {
-    return state
-  }
-
-  return { ...state, location }
-}
-
-// Syncing
-
-export function syncHistory(history) {
-  let unsubscribeHistory, currentKey, unsubscribeStore
-  let connected = false, syncing = false
-
-  history.listen(location => { initialState.location = location })()
-
-  function middleware(store) {
-    unsubscribeHistory = history.listen(location => {
-      currentKey = location.key
-      if (syncing) {
-        // Don't dispatch a new action if we're replaying location.
-        return
-      }
-
-      store.dispatch(updateLocation(location))
-    })
-
-    connected = true
-
-    return next => action => {
-      if (action.type !== TRANSITION || !connected) {
-        return next(action)
-      }
-
-      const { payload: { method, args } } = action
-      history[method](...args)
-    }
-  }
-
-  middleware.listenForReplays =
-    (store, selectLocationState = SELECT_LOCATION) => {
-      const getLocationState = () => selectLocationState(store.getState())
-      const initialLocation = getLocationState()
-
-      unsubscribeStore = store.subscribe(() => {
-        const location = getLocationState()
-
-        // If we're resetting to the beginning, use the saved initial value. We
-        // need to dispatch a new action at this point to populate the store
-        // appropriately.
-        if (location.key === initialLocation.key) {
-          history.replace(initialLocation)
-          return
-        }
-
-        // Otherwise, if we need to update the history location, do so without
-        // dispatching a new action, as we're just bringing history in sync
-        // with the store.
-        if (location.key !== currentKey) {
-          syncing = true
-          history.transitionTo(location)
-          syncing = false
-        }
-      })
-    }
-
-  middleware.unsubscribe = () => {
-    unsubscribeHistory()
-    if (unsubscribeStore) {
-      unsubscribeStore()
-    }
-
-    connected = false
-  }
-
-  return middleware
-}
+export syncHistoryWithStore from './sync'
+export { LOCATION_CHANGE, routerReducer } from './reducer'
+
+export {
+  UPDATE_LOCATION,
+  push, replace, go, goBack, goForward,
+  routeActions
+} from './actions'
+export routerMiddleware from './middleware'

src/middleware.js

@@ -0,0 +1,17 @@
+import UPDATE_LOCATION from './actions'
+
+/**
+ * This middleware captures UPDATE_LOCATION actions to redirect to the
+ * provided history object. This will prevent these actions from reaching your
+ * reducer or any middleware that comes after this one.
+ */
+export default function routerMiddleware(history) {
+  return () => next => action => {
+    if (action.type !== UPDATE_LOCATION) {
+      return next(action)
+    }
+
+    const { payload: { method, args } } = action
+    history[method](...args)
+  }
+}