Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

location state is not persisted for initial route #165

Closed
gshively11 opened this issue May 12, 2017 · 9 comments
Closed

location state is not persisted for initial route #165

gshively11 opened this issue May 12, 2017 · 9 comments
Labels

Comments

@gshively11
Copy link

https://github.com/FormidableLabs/redux-little-router/blob/master/src/enhancer.js#L34

The location returned by the history listener does not return state (and thus query) for the initial route. Reproduce using this flow:

  1. On a new tab, load a URL with at least one querystring value
  2. Perform an action on the page that results in a push to a new url with different query values
  3. Press the browser's back button

Expected: the query object should be available on the ROUTER_LOCATION_CHANGED action payload
Result: the query is an empty object (key is undefined and hash is an empty string as well).

I spent a little time trying to track down the root cause, but had to move onto other things, so reproduction steps is the best I can give you at the moment.

@baebb
Copy link
Contributor

baebb commented May 14, 2017

Reproduced: https://gfycat.com/ValuableVillainousCanvasback

@gshively11
Copy link
Author

Workaround for the moment seems to be immediately dispatching a replace action using the initial location's pathname and search:

const initialLocation = store.getState().router;
if (initialLocation) {
  store.dispatch(initializeCurrentLocation(initialLocation));
  // Hack workaround for https://github.com/FormidableLabs/redux-little-router/issues/165
  store.dispatch(replace(`${initialLocation.pathname}${initialLocation.search}`));
}

@codeincontext
Copy link

While debugging something similar (no key set on initial load) I managed to replace the snippet above with:

store.dispatch(replace({}));

@jakewisse
Copy link

@skattyadz: That will wipe out the query string entirely. packState() will return:

{
  search: '',
  state: {
    reduxLittleRouter: {
      query: {},
      options: {}
    }
  }
}

If you'd rather pass an object to replace(), you can do:

dispatch(replace({
  pathname: routerState.pathname
  search: routerState.search
}));

@jakewisse
Copy link

jakewisse commented Jun 16, 2017

@gshively11's workaround leaves off the hash if there is one. Since I'm not rendering on the server or anywhere that doesn't have window.location, I'm just doing:

const { pathname, search, hash } = window.location;
dispatch(replace(`${pathname}${search}${hash}`));

@tptee
Copy link
Contributor

tptee commented Jun 22, 2017

Weird, I can't seem to repro this in the demo. Might have to do with the fact that it's SSRing. @justrossthings if you get a chance, can you send me a repro repo? Otherwise I'll try to disable SSR and reproduce in the demo.

@tptee
Copy link
Contributor

tptee commented Jun 22, 2017

...wait, that's just react-redux-boiler right? I'll clone and investigate

@baebb
Copy link
Contributor

baebb commented Jun 22, 2017

@tptee probs won't be repro from react-redux-boiler as I've changed it a bit, plus it's not using v14 & i imagine the fix for #144 (comment) would have fixed this

@tptee
Copy link
Contributor

tptee commented Jun 25, 2017

Finally reproduced, even in SSR. This is going to require some refactoring :/

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

5 participants