Prevent double-rendering on initilization (supasate#218)

lluistfc · Apr 30, 2019 · d442129 · d442129
1 parent 4bf3c51
commit d442129
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 3 deletions.
diff --git a/src/actions.js b/src/actions.js
@@ -4,11 +4,12 @@
  */
 export const LOCATION_CHANGE = '@@router/LOCATION_CHANGE'
 
-export const onLocationChanged = (location, action) => ({
+export const onLocationChanged = (location, action, isFirstRendering = false) => ({
   type: LOCATION_CHANGE,
   payload: {
     location,
     action,
+    isFirstRendering,
   }
 })
 

diff --git a/src/reducer.js b/src/reducer.js
@@ -18,7 +18,12 @@ const createConnectRouter = (structure) => {
     */
     return (state = initialRouterState, { type, payload } = {}) => {
       if (type === LOCATION_CHANGE) {
-        return merge(state, payload)
+        const { location, action, isFirstRendering } = payload
+        // Don't update the state ref for the first rendering
+        // to prevent the double-rendering issue on initialization
+        return isFirstRendering
+          ? state
+          : merge(state, { location, action })
       }
 
       return state

diff --git a/test/actions.test.js b/test/actions.test.js
@@ -21,6 +21,24 @@ describe('Actions', () => {
           hash: '',
         },
         action: 'POP',
+        isFirstRendering: false,
+      },
+    }
+    expect(actualAction).toEqual(expectedAction)
+  })
+
+  it('returns correct action when calling onLocationChanged() for the first rendering', () => {
+    const actualAction = onLocationChanged({ pathname: '/', search: '', hash: '' }, 'POP', true)
+    const expectedAction = {
+      type: LOCATION_CHANGE,
+      payload: {
+        location: {
+          pathname: '/',
+          search: '',
+          hash: '',
+        },
+        action: 'POP',
+        isFirstRendering: true,
       },
     }
     expect(actualAction).toEqual(expectedAction)

diff --git a/test/reducer.test.js b/test/reducer.test.js
@@ -92,6 +92,36 @@ describe('connectRouter', () => {
       const nextState = rootReducer(currentState, action)
       expect(nextState).toBe(currentState)
     })
+
+    it('does not change state ref when receiving LOCATION_CHANGE for the first rendering', () => {
+      const rootReducer = combineReducers({
+        router: connectRouter(mockHistory)
+      })
+      const currentState = {
+        router: {
+          location: {
+            pathname: '/',
+            search: '',
+            hash: '',
+          },
+          action: 'POP',
+        },
+      }
+      const action = {
+        type: LOCATION_CHANGE,
+        payload: {
+          location: {
+            pathname: '/',
+            search: '',
+            hash: '',
+          },
+          action: 'POP',
+          isFirstRendering: true,
+        }
+      }
+      const nextState = rootReducer(currentState, action)
+      expect(nextState).toBe(currentState)
+    })
   })
 
   describe('with immutable structure', () => {
@@ -143,6 +173,36 @@ describe('connectRouter', () => {
       })
       expect(nextState).toEqual(expectedState)
     })
+
+    it('does not change state ref when receiving LOCATION_CHANGE for the first rendering', () => {
+      const rootReducer = combineReducers({
+        router: connectRouter(mockHistory)
+      })
+      const currentState = {
+        router: {
+          location: {
+            pathname: '/',
+            search: '',
+            hash: '',
+          },
+          action: 'POP',
+        },
+      }
+      const action = {
+        type: LOCATION_CHANGE,
+        payload: {
+          location: {
+            pathname: '/',
+            search: '',
+            hash: '',
+          },
+          action: 'POP',
+          isFirstRendering: true,
+        }
+      }
+      const nextState = rootReducer(currentState, action)
+      expect(nextState).toBe(currentState)
+    })
   })
 
   describe('with seamless immutable structure', () => {
@@ -194,5 +254,35 @@ describe('connectRouter', () => {
       }
       expect(nextState).toEqual(expectedState)
     })
+
+    it('does not change state ref when receiving LOCATION_CHANGE for the first rendering', () => {
+      const rootReducer = combineReducers({
+        router: connectRouter(mockHistory)
+      })
+      const currentState = {
+        router: {
+          location: {
+            pathname: '/',
+            search: '',
+            hash: '',
+          },
+          action: 'POP',
+        },
+      }
+      const action = {
+        type: LOCATION_CHANGE,
+        payload: {
+          location: {
+            pathname: '/',
+            search: '',
+            hash: '',
+          },
+          action: 'POP',
+          isFirstRendering: true,
+        }
+      }
+      const nextState = rootReducer(currentState, action)
+      expect(nextState).toBe(currentState)
+    })
   })
-})
+})