Use middleware to synchronize store to history

Author: taion

.babelrc

@@ -1,4 +1,3 @@
 {
-    "presets": ["es2015"],
-    "plugins": ["transform-object-assign"]
+    "presets": ["es2015", "stage-2"]
 }

package.json

@@ -42,8 +42,8 @@
     "babel-core": "^6.2.1",
     "babel-eslint": "^4.1.6",
     "babel-loader": "^6.2.0",
-    "babel-plugin-transform-object-assign": "^6.0.14",
     "babel-preset-es2015": "^6.1.2",
+    "babel-preset-stage-2": "^6.3.13",
     "eslint": "^1.10.3",
     "eslint-config-rackt": "^1.1.1",
     "expect": "^1.13.0",
@@ -64,8 +64,5 @@
     "redux": "^3.0.4",
     "redux-devtools": "^2.1.5",
     "webpack": "^1.12.9"
-  },
-  "dependencies": {
-    "deep-equal": "^1.0.1"
   }
 }

src/index.js

@@ -1,61 +1,39 @@
-import deepEqual from 'deep-equal'
-
 // Constants
 
 export const UPDATE_PATH = '@@router/UPDATE_PATH'
 const SELECT_STATE = state => state.routing
 
-export function pushPath(path, state, { avoidRouterUpdate = false } = {}) {
+export function pushPath(path, state, key) {
   return {
     type: UPDATE_PATH,
-    payload: {
-      path: path,
-      state: state,
-      replace: false,
-      avoidRouterUpdate: !!avoidRouterUpdate
-    }
+    payload: { path, state, key, replace: false }
   }
 }
 
-export function replacePath(path, state, { avoidRouterUpdate = false } = {}) {
+export function replacePath(path, state, key) {
   return {
     type: UPDATE_PATH,
-    payload: {
-      path: path,
-      state: state,
-      replace: true,
-      avoidRouterUpdate: !!avoidRouterUpdate
-    }
+    payload: { path, state, key, replace: true }
   }
 }
 
 // Reducer
 
 let initialState = {
-  changeId: 1,
   path: undefined,
   state: undefined,
   replace: false
 }
 
-function update(state=initialState, { type, payload }) {
+export function routeReducer(state=initialState, { type, payload }) {
   if(type === UPDATE_PATH) {
-    return Object.assign({}, state, {
-      path: payload.path,
-      changeId: state.changeId + (payload.avoidRouterUpdate ? 0 : 1),
-      state: payload.state,
-      replace: payload.replace
-    })
+    return payload
   }
+
   return state
 }
 
 // Syncing
-
-function locationsAreEqual(a, b) {
-  return a != null && b != null && a.path === b.path && deepEqual(a.state, b.state)
-}
-
 function createPath(location) {
   const { pathname, search, hash } = location
   let result = pathname
@@ -66,84 +44,75 @@ function createPath(location) {
   return result
 }
 
-export function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
-  const getRouterState = () => selectRouterState(store.getState())
-
-  // To properly handle store updates we need to track the last route.
-  // This route contains a `changeId` which is updated on every
-  // `pushPath` and `replacePath`. If this id changes we always
-  // trigger a history update. However, if the id does not change, we
-  // check if the location has changed, and if it is we trigger a
-  // history update. It's possible for this to happen when something
-  // reloads the entire app state such as redux devtools.
-  let lastRoute = undefined
-
-  if(!getRouterState()) {
-    throw new Error(
-      'Cannot sync router: route state does not exist (`state.routing` by default). ' +
-      'Did you install the routing reducer?'
-    )
-  }
+export function syncHistory(history) {
+  let unsubscribeHistory, currentKey, unsubscribeStore
+  let connected = false
 
-  const unsubscribeHistory = history.listen(location => {
-    const route = {
-      path: createPath(location),
-      state: location.state
-    }
+  function middleware(store) {
+    unsubscribeHistory = history.listen(location => {
+      const path = createPath(location)
+      const { state, key } = location
+      currentKey = key
 
-    if (!lastRoute) {
-      // `initialState` *should* represent the current location when
-      // the app loads, but we cannot get the current location when it
-      // is defined. What happens is `history.listen` is called
-      // immediately when it is registered, and it updates the app
-      // state with an UPDATE_PATH action. This causes problem when
-      // users are listening to UPDATE_PATH actions just for
-      // *changes*, and with redux devtools because "revert" will use
-      // `initialState` and it won't revert to the original URL.
-      // Instead, we specialize the first route notification and do
-      // different things based on it.
-      initialState = {
-        changeId: 1,
-        path: route.path,
-        state: route.state,
-        replace: false
-      }
+      const method = location.action === 'REPLACE' ? replacePath : pushPath
+      store.dispatch(method(path, state, key))
+    })
 
-      // Also set `lastRoute` so that the store subscriber doesn't
-      // trigger an unnecessary `pushState` on load
-      lastRoute = initialState
+    connected = true
 
-      store.dispatch(pushPath(route.path, route.state, { avoidRouterUpdate: true }));
-    } else if(!locationsAreEqual(getRouterState(), route)) {
-      // The above check avoids dispatching an action if the store is
-      // already up-to-date
-      const method = location.action === 'REPLACE' ? replacePath : pushPath
-      store.dispatch(method(route.path, route.state, { avoidRouterUpdate: true }))
-    }
-  })
+    return next => action => {
+      if (action.type !== UPDATE_PATH) {
+        next(action)
+        return
+      }
 
-  const unsubscribeStore = store.subscribe(() => {
-    let routing = getRouterState()
+      const { payload } = action
+      if (payload.key || !connected) {
+        // Either this came from the history, or else we're not forwarding
+        // location actions to history.
+        next(action)
+        return
+      }
 
-    // Only trigger history update if this is a new change or the
-    // location has changed.
-    if(lastRoute.changeId !== routing.changeId ||
-       !locationsAreEqual(lastRoute, routing)) {
+      const { replace, state, path } = payload
+      // FIXME: ???! `path` and `pathname` are _not_ synonymous.
+      const method = replace ? 'replaceState' : 'pushState'
 
-      lastRoute = routing
-      const method = routing.replace ? 'replace' : 'push'
-      history[method]({ 
-        pathname: routing.path, 
-        state: routing.state 
-      })
+      history[method](state, path)
     }
+  }
 
-  })
+  middleware.syncHistoryToStore =
+    (store, selectRouterState = SELECT_STATE) => {
+      const getRouterState = () => selectRouterState(store.getState())
+      const {
+        key: initialKey, state: initialState, path: initialPath
+      } = getRouterState()
+
+      unsubscribeStore = store.subscribe(() => {
+        let { key, state, path } = getRouterState()
+
+        // If we're resetting to the beginning, use the saved values.
+        if (key === undefined) {
+          key = initialKey
+          state = initialState
+          path = initialPath
+        }
+
+        if (key !== currentKey) {
+          history.pushState(state, path)
+        }
+      })
+    }
 
-  return function unsubscribe() {
+  middleware.unsubscribe = () => {
     unsubscribeHistory()
-    unsubscribeStore()
+    if (unsubscribeStore) {
+      unsubscribeStore()
+    }
+
+    connected = false
   }
-}
 
-export { update as routeReducer }
+  return middleware
+}

test/browser/index.js

@@ -2,4 +2,4 @@ import { createHashHistory, createHistory } from 'history'
 import createTests from '../createTests.js'
 
 createTests(createHashHistory, 'Hash History', () => window.location = '#/')
-createTests(createHistory, 'Browser History', () => window.history.replaceState(null, null, '/'))
+createTests(createHistory, 'Browser History', () => window.history.replaceState(null, null, '/'), true)