Handle routing state and replace

Author: kimjoar

package.json

@@ -28,5 +28,8 @@
     "babel-cli": "^6.1.2",
     "babel-plugin-transform-object-assign": "^6.0.14",
     "babel-preset-es2015": "^6.1.2"
+  },
+  "dependencies": {
+    "deep-equal": "^1.0.1"
   }
 }

src/index.js

@@ -1,29 +1,45 @@
+const deepEqual = require('deep-equal');
 
-// constants
+// Constants
 
 const UPDATE_PATH = "@@router/UPDATE_PATH";
 const SELECT_STATE = state => state.routing;
 
 // Action creator
 
-function updatePath(path, noRouterUpdate) {
+function updatePath(path, state, noRouterUpdate) {
   return {
     type: UPDATE_PATH,
     path: path,
-    noRouterUpdate: noRouterUpdate
+    replace: false,
+    noRouterUpdate: !!noRouterUpdate
+  }
+}
+
+function replacePath(path, state, noRouterUpdate) {
+  return {
+    type: UPDATE_PATH,
+    path: path,
+    replace: true,
+    noRouterUpdate: !!noRouterUpdate
   }
 }
 
 // Reducer
 
-const initialState = typeof window === 'undefined' ? {} : {
-  path: locationToString(window.location)
+const initialState = {
+  path: undefined,
+  state: undefined,
+  replace: false,
+  noRouterUpdate: true
 };
 
 function update(state=initialState, action) {
   if(action.type === UPDATE_PATH) {
     return Object.assign({}, state, {
       path: action.path,
+      state: action.state,
+      replace: action.replace,
       noRouterUpdate: action.noRouterUpdate
     });
   }
@@ -32,8 +48,8 @@ function update(state=initialState, action) {
 
 // Syncing
 
-function locationToString(location) {
-  return location.pathname + location.search + location.hash;
+function locationsAreEqual(a, b) {
+  return a.path === b.path && deepEqual(a.state, b.state);
 }
 
 function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
@@ -46,12 +62,24 @@ function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
     );
   }
 
+  let historyLocation = {};
+
   const unsubscribeHistory = history.listen(location => {
+    historyLocation = {
+      path: history.createPath(location),
+      state: location.state
+    };
+
+    const routing = getRouterState();
+ 
     // Avoid dispatching an action if the store is already up-to-date,
     // even if `history` wouldn't do anything if the location is the same
-    if(getRouterState().path !== locationToString(location)) {
-      store.dispatch(updatePath(locationToString(location)));
-    }
+    if(locationsAreEqual(routing, historyLocation)) return;
+
+    // Initial state, update store with the current location but skip routing
+    const noRouterUpdate = routing.path == null;
+
+    store.dispatch(updatePath(historyLocation.path, historyLocation.state, noRouterUpdate));
   });
 
   const unsubscribeStore = store.subscribe(() => {
@@ -61,9 +89,12 @@ function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
     // `noRouterUpdate` flag can be set to avoid updating altogether,
     // which is useful for things like loading snapshots or very special
     // edge cases.
-    if(routing.path !== locationToString(window.location) &&
-       !routing.noRouterUpdate) {
-      history.pushState(null, routing.path);
+    if (locationsAreEqual(routing, historyLocation) || routing.noRouterUpdate) return;
+
+    if (routing.replace) {
+      history.replaceState(routing.state, routing.path);
+    } else {
+      history.pushState(routing.state, routing.path);
     }
   });
 
@@ -76,6 +107,7 @@ function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
 module.exports = {
   UPDATE_PATH,
   updatePath,
+  replacePath,
   syncReduxAndRouter,
   routeReducer: update,
 };