Usage with Redux #99
Description
Hi all,
First of all, great work on this project. I like how universal-router isn't tightly coupled to the browser history/navigation code, making it a very versatile routing library.
Speaking of which, it seems that the recommended way to navigate and respond to location changes is to pair universal-router + history, as shown in #72 and in React Starter Kit.
This generally works well — however, it doesn't fit into the Redux architecture and thus breaks the devtools experience (time-travel debugging, etc).
I'd like to share an alternative, "Redux-first" method for achieving navigation and location listening. It allows:
- the location data to be held in the store (and act as the source of truth for location data)
- responding to location changes via subscribing to the store
- navigating by dispatching actions (which handle updating the store and browser history together).
This is achievable with just a small amount of boilerplate code (Redux middleware, reducer, and action creators), which I've packaged into a library: redux-first-routing.
Here's what you get on the state tree:
{
..., // other redux state
router: {
pathname: '/nested/path/',
search: '?with=query',
queries: {
with: 'query',
},
hash: '#and-hash'
}
}Together, universal-router + redux-first-routing can be used to create a complete Redux routing solution for any front-end framework/library:
You can find a basic code recipe and live demo here:
And you can apply the same techniques to a larger application, like React Starter Kit's feature/redux branch.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.