Usage with Redux

[mksarge]

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:

• Usage with Universal Router

And you can apply the same techniques to a larger application, like React Starter Kit's feature/redux branch.

---

Related: #43, #86

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[mksarge]

If you'd like to learn more about this, check out my recently published article on the topic:

• An Introduction to the Redux-First Routing Model

[iwoork]

Is there a PR or complete example of this with integration with react-starter-kit + redux? The basic example is great but I get lost when I tried to integrate this with the current structure of RSK redux

[langpavel]

Hi! Sounds really interesting, can you open PR against feature/redux branch on React Starter Kit? Please, mention me and ping me if you need my attention!

[langpavel]

Wow, really late but I hope you are still interested!