Makes sure the state in the store matches the state in history (#445)

This solves some problems where they would be out of sync on the first render when using server side rendering. The location would be the same for both of them but the key would be different resulting in some strange behaviour.

The application will now always dispatch a LOCATION_CHANGE on initial render. This was already done when not using server side rendering, meaning that the behaviour is similar between using server side rendering and not.

Author: dlmr

src/sync.js

@@ -34,6 +34,7 @@ export default function syncHistoryWithStore(history, store, {
   let isTimeTraveling
   let unsubscribeFromStore
   let unsubscribeFromHistory
+  let currentLocation
 
   // What does the store say about current location?
   const getLocationInStore = (useInitialIfEmpty) => {
@@ -42,14 +43,14 @@ export default function syncHistoryWithStore(history, store, {
       (useInitialIfEmpty ? initialLocation : undefined)
   }
 
-  // Init currentLocation with potential location in store
-  let currentLocation = getLocationInStore()
+  // Init initialLocation with potential location in store
+  initialLocation = getLocationInStore()
 
   // If the store is replayed, update the URL in the browser to match.
   if (adjustUrlOnReplay) {
     const handleStoreChange = () => {
       const locationInStore = getLocationInStore(true)
-      if (currentLocation === locationInStore) {
+      if (currentLocation === locationInStore || initialLocation === locationInStore) {
         return
       }
 

test/_createSyncTest.js

@@ -186,6 +186,13 @@ export default function createTests(createHistory, name, reset = defaultReset) {
         // We expect that we get a single call to history
         expect(historyListen.calls.length).toBe(1)
 
+        clientStore.dispatch({
+          type: 'non-router'
+        })
+
+        // We expect that we still get only a single call to history after a non-router action is dispatched
+        expect(historyListen.calls.length).toBe(1)
+
         historyUnsubscribe()
       })
     })