Expose actions from the history API to the state tree

src/middleware.js

@@ -3,11 +3,14 @@ import {
 } from './action-types';
 
 const locationDidChange = location => {
-  const { basename, pathname } = location;
+  const { basename, pathname, action } = location;
   return {
     type: LOCATION_CHANGED,
-    payload: `${basename || ''}${pathname}`
-      .replace(/\/$/, '') // remove trailing slash
+    payload: {
+      action,
+      url: `${basename || ''}${pathname}`
+        .replace(/\/$/, '') // remove trailing slash
+    }
   };
 };
 

src/reducer.js

@@ -6,7 +6,10 @@ export default (routes, createMatcher = matcherFactory) => {
 
   return (state = {}, action) => {
     if (action.type === LOCATION_CHANGED) {
-      return {...matchRoute(action.payload)};
+      return {
+        ...matchRoute(action.payload.url),
+        historyAction: action.payload.action
+      };
     }
     return state;
   };

test/spec/middleware.spec.jsx

@@ -24,27 +24,45 @@ const testRouterMiddleware = (initialAction, done, assertion) => {
 
 describe('Router middleware', () => {
   const actions = {
-    [PUSH]: '/push',
-    [REPLACE]: '/replace',
-    [GO]: '/go',
-    [GO_BACK]: '/goBack',
-    [GO_FORWARD]: '/goForward'
+    [PUSH]: {
+      url: '/push',
+      action: 'PUSH'
+    },
+    [REPLACE]: {
+      url: '/replace',
+      action: 'REPLACE'
+    },
+    [GO]: {
+      url: '/go',
+      action: 'REPLACE'
+    },
+    [GO_BACK]: {
+      url: '/goBack',
+      action: 'POP'
+    },
+    [GO_FORWARD]: {
+      url: '/goForward',
+      action: 'PUSH'
+    }
   };
 
   Object.keys(actions).forEach(actionType => {
-    const expectedPath = actions[actionType];
+    const expected = actions[actionType];
 
     it(`dispatches location changes with ${actionType}`, done => {
       const action = {
         type: actionType,
         payload: {
-          pathname: expectedPath
+          pathname: expected.url
         }
       };
       testRouterMiddleware(action, done, resultAction => {
         expect(resultAction).to.deep.equal({
           type: LOCATION_CHANGED,
-          payload: expectedPath
+          payload: {
+            url: expected.url,
+            action: expected.action
+          }
         });
       });
     });

test/spec/mocks/history.js

@@ -9,31 +9,36 @@ export default class MockHistory {
 
   push() {
     this.callback({
-      pathname: '/push'
+      pathname: '/push',
+      action: 'PUSH'
     });
   }
 
   replace() {
     this.callback({
-      pathname: '/replace'
+      pathname: '/replace',
+      action: 'REPLACE'
     });
   }
 
   go() {
     this.callback({
-      pathname: '/go'
+      pathname: '/go',
+      action: 'REPLACE'
     });
   }
 
   goBack() {
     this.callback({
-      pathname: '/goBack'
+      pathname: '/goBack',
+      action: 'POP'
     });
   }
 
   goForward() {
     this.callback({
-      pathname: '/goForward'
+      pathname: '/goForward',
+      action: 'PUSH'
     });
   }
 }

test/spec/reducer.spec.jsx

@@ -11,10 +11,16 @@ describe('Router reducer', () => {
   it('adds the pathname to the store', () => {
     const action = {
       type: LOCATION_CHANGED,
-      payload: '/rofl'
+      payload: {
+        url: '/rofl',
+        action: 'PUSH'
+      }
     };
     const result = routerReducer({}, mockCreateMatcher)({}, action);
-    expect(result).to.deep.equal({ pathname: '/rofl'});
+    expect(result).to.deep.equal({
+      pathname: '/rofl',
+      historyAction: 'PUSH'
+    });
   });
 
   it('is not affected by other action types', () => {