@@ -61,19 +61,23 @@ function locationsAreEqual(a, b) {
61
61
function syncReduxAndRouter ( history , store , selectRouterState = SELECT_STATE ) {
62
62
const getRouterState = ( ) => selectRouterState ( store . getState ( ) ) ;
63
63
64
- // Because we're not able to set the initial path in `initialState` we need a
65
- // "hack" to get "Revert" in Redux DevTools to work. We solve this by keeping
66
- // the first route so we can revert to this route when the initial state is
67
- // replayed to reset the state. Basically, we treat the first route as our
68
- // initial state.
64
+ // `initialState` *sould* represent the current location when the
65
+ // app loads, but we cannot get the current location when it is
66
+ // defined. What happens is `history.listen` is called immediately
67
+ // when it is registered, and it updates the app state with an
68
+ // action. This causes problems with redux devtools because "revert"
69
+ // will use `initialState` and it won't revert to the original URL.
70
+ // Instead, we track the first route and hack it to load when using
71
+ // the `initialState`.
69
72
let firstRoute = undefined ;
70
73
71
- // To properly handle store updates we need to track the last route. This
72
- // route contains a `changeId` which is updated on every `pushPath` and
73
- // `replacePath`. If this id changes we always trigger a history update.
74
- // However, if the id does not change, we check if the location has changed,
75
- // and if it is we trigger a history update. (If these are out of sync it's
76
- // likely because of React DevTools.)
74
+ // To properly handle store updates we need to track the last route.
75
+ // This route contains a `changeId` which is updated on every
76
+ // `pushPath` and `replacePath`. If this id changes we always
77
+ // trigger a history update. However, if the id does not change, we
78
+ // check if the location has changed, and if it is we trigger a
79
+ // history update. It's possible for this to happen when something
80
+ // reloads the entire app state such as redux devtools.
77
81
let lastRoute = undefined ;
78
82
79
83
if ( ! getRouterState ( ) ) {
@@ -94,14 +98,12 @@ function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
94
98
}
95
99
96
100
// Avoid dispatching an action if the store is already up-to-date,
97
- // even if `history` wouldn't do anything if the location is the same
98
- if ( locationsAreEqual ( getRouterState ( ) , route ) ) return ;
99
-
100
- const updatePath = location . action === 'REPLACE'
101
- ? replacePath
102
- : pushPath ;
103
-
104
- store . dispatch ( updatePath ( route . path , route . state , { avoidRouterUpdate : true } ) ) ;
101
+ // even if `history` wouldn't do anything if the location is the
102
+ // same
103
+ if ( ! locationsAreEqual ( getRouterState ( ) , route ) ) {
104
+ const method = location . action === 'REPLACE' ? replacePath : pushPath ;
105
+ store . dispatch ( method ( route . path , route . state , { avoidRouterUpdate : true } ) ) ;
106
+ }
105
107
} ) ;
106
108
107
109
const unsubscribeStore = store . subscribe ( ( ) => {
@@ -112,19 +114,17 @@ function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
112
114
routing = firstRoute ;
113
115
}
114
116
115
- // Only trigger history update is this is a new change or the location
116
- // has changed.
117
- if ( lastRoute !== undefined &&
118
- lastRoute . changeId === routing . changeId &&
119
- locationsAreEqual ( lastRoute , routing ) ) {
120
- return ;
121
- }
122
-
123
- lastRoute = routing ;
117
+ // Only trigger history update is this is a new change or the
118
+ // location has changed.
119
+ if ( lastRoute === undefined ||
120
+ lastRoute . changeId !== routing . changeId ||
121
+ ! locationsAreEqual ( lastRoute , routing ) ) {
124
122
125
- const method = routing . replace ? 'replaceState' : 'pushState' ;
123
+ lastRoute = routing ;
124
+ const method = routing . replace ? 'replaceState' : 'pushState' ;
125
+ history [ method ] ( routing . state , routing . path ) ;
126
+ }
126
127
127
- history [ method ] ( routing . state , routing . path ) ;
128
128
} ) ;
129
129
130
130
return function unsubscribe ( ) {
0 commit comments