Merge pull request #289 from getstreamline/fix-initial-redirect

Fix issue when initial location redirects

Author: timdorr

package.json

@@ -64,6 +64,9 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
     "react": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "react-redux": "^4.4.0",
+    "react-router": "^2.0.0",
     "redux": "^3.0.4",
     "redux-devtools": "^3.0.0",
     "redux-devtools-dock-monitor": "^1.0.1",

src/sync.js

@@ -101,8 +101,6 @@ export default function syncHistoryWithStore(history, store, {
     listen(listener) {
       // Copy of last location.
       let lastPublishedLocation = getLocationInStore(true)
-      // History listeners expect a synchronous call
-      listener(lastPublishedLocation)
 
       // Keep track of whether we unsubscribed, as Redux store
       // only applies changes in subscriptions on next dispatch
@@ -118,6 +116,11 @@ export default function syncHistoryWithStore(history, store, {
         }
       })
 
+      // History listeners expect a synchronous call. Make the first call to the
+      // listener after subscribing to the store, in case the listener causes a
+      // location change (e.g. when it redirects)
+      listener(lastPublishedLocation)
+
       // Let user unsubscribe later
       return () => {
         unsubscribed = true

test/_createSyncTest.js

@@ -1,5 +1,9 @@
 import expect from 'expect'
 
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Router, Route, useRouterHistory } from 'react-router'
+import { Provider } from 'react-redux'
 import { createStore, combineReducers } from 'redux'
 import { ActionCreators, instrument } from 'redux-devtools'
 
@@ -214,5 +218,81 @@ export default function createTests(createHistory, name, reset = defaultReset) {
         historyUnsubscribe()
       })
     })
+
+    if (typeof(document) !== 'undefined') {
+      describe('Redux Router component', () => {
+        let store, history, rootElement
+
+        beforeEach(() => {
+          store = createStore(combineReducers({
+            routing: routerReducer
+          }))
+
+          history = syncHistoryWithStore(useRouterHistory(createHistory)(), store)
+
+          rootElement = document.createElement('div')
+          document.body.appendChild(rootElement)
+        })
+
+        afterEach(() => {
+          history.unsubscribe()
+          rootElement.parentNode.removeChild(rootElement)
+        })
+
+        it('syncs history -> components', () => {
+          history.push('/foo')
+
+          ReactDOM.render(
+            React.createElement(Provider, { store },
+              React.createElement(Router, { history },
+                React.createElement(Route,
+                  {
+                    path: '/',
+                    component: props => React.createElement('span', {}, props.children)
+                  },
+                  [ 'foo', 'bar' ].map(path =>
+                    React.createElement(Route, {
+                      path: path,
+                      component: () => React.createElement('span', {}, `at /${path}`)
+                    })
+                  )
+                )
+              )
+            ),
+            rootElement
+          )
+          expect(rootElement.textContent).toEqual('at /foo')
+
+          history.push('/bar')
+          expect(rootElement.textContent).toEqual('at /bar')
+        })
+
+        it('syncs history -> components when the initial route gets replaced', () => {
+          history.push('/foo')
+
+          ReactDOM.render(
+            React.createElement(Provider, { store },
+              React.createElement(Router, { history }, [
+                React.createElement(Route, {
+                  path: '/',
+                  component: props => React.createElement('span', {}, props.children)
+                }, [
+                  React.createElement(Route, {
+                    path: 'foo',
+                    onEnter: (nextState, replace) => replace('/bar')
+                  }),
+                  React.createElement(Route, {
+                    path: 'bar',
+                    component: () => React.createElement('span', {}, [ 'at /bar' ])
+                  })
+                ])
+              ])
+            ),
+            rootElement
+          )
+          expect(rootElement.textContent).toEqual('at /bar')
+        })
+      })
+    }
   })
 }