Router: Syncing with redux state

[Kadrian]

Hey, I'm curiuos: Previously, using react-router, I've been happily using connected-react-router

Is there something similar for reach router yet? I.e. I'm looking for a way to
1) Update the redux state, when someone navigates using a Link or back button
2) Dispatch redux actions like push(), goBack(), replace(), or similar, to trigger a navigation, i.e. change the URL + redux state.

[johnkorzhuk]

Same issue here. Using redux-saga and we're upgrading to gatsby v2. Going to be quite the refactor w/o something equivalent to connected-react-router

[hyanmandian]

I think that you can listen to history and update your store with these changes.

By these files https://github.com/reach/router/blob/master/src/index.js and https://github.com/reach/router/blob/master/src/lib/history.js the following example should work but after tests, I discovered that globalHistory is not exported in the current published package :(

import { globalHistory } from '@reach/router';

globalHistory.listen(() => {});

So I wrote this workaround to solve that for a while

import { LocationProvider } from '@reach/router';

LocationProvider.defaultProps.history.listen(history => {
  console.log(LocationProvider.defaultProps.history.location);
});

Example: https://codesandbox.io/s/13p734wl43

[salvoravida]

@Kadrian @johnkorzhuk @hyanmandian have a look here https://github.com/salvoravida/redux-first-history

redux-first-history bind history to redux support react-router and @reach/router, also both at same time!

Give me feedback if you like it!

Salvo

[carloslfu]

redux-first-history is the simpler solution I found. Thanks, @salvoravida.

[mtliendo]

Generally speaking, syncing your routes with redux isn't advised in routing. In react router the stance was more of a suggestion, but reach router omits recommendations all together.

That being said, I'm happy to see that the community in the comments have ways to solve for your use case 😁🎉