reactjs/react-router-redux

Why use react-router with redux if location isn't in redux state?

laustdeleuran opened this issue · 5 comments

Your docs point out that:

You should not read the location state directly from the Redux store. This is because React Router operates asynchronously (to handle things such as dynamically-loaded components) and your component tree may not yet be updated in sync with your Redux state. You should rely on the props passed by React Router, as they are only updated after it has processed all asynchronous code.

(Emphasis mine)

Why can't I access the current location through Redux state? I understand that this is done asynchronously, but there are defined ways to handle async actions in Redux.

Having location in Redux state would not only be extremely helpful and avoid sometimes having to pass down location several component levels, it would also make the react-router part of the Redux state make more intuitively sense.

I would argue 99% of the time, you don't actually need react-router-redux. And this is coming from the guy that wrote it...

But for those that like the convenience and consistent API, along with integration into existing tooling (such as redux-devtools), it can make sense. It's up to your project/team and their preferences.

@timdorr

Could you elaborate on that argument for me? I feel like having those thing in Redux state makes intuitive sense, since that literally is where my apps store all their data.

I appreciate the consistent API of being able to dispatch router actions, but that doesn't explain why location is only available as a prop, and why I need to pass it down through all of my components.

@timdorr I'm still interested in your perspective on this, and why the current implementation implements actions (one part of the Redux paradigm), but not location in state (which, to me, would be another natural part of the Redux paradigm).

@timdorr I'm still very interested in your take on this, and if you see any way to fully integrate these two libs.

So, after getting no response here or on Twitter, I wanted to reopen this issue on the new repo for this project. However the guidelines for posting issues there directed me to the Reactiflux Discord group, where a couple of very helpful people helped me understand this in more detail. You can see a transcript of that conversation here.

In short, our conclusions were:

  • PS: A big part of the reason that react-router-redux isn't that necessary with RRv4 is that there is no centralized route configuration.
    When you have nested routes, you can end up with multiple match objects. There isn't really a good way to represent those in a Redux store, so that is best left to RR (which can pass them to components via withRouter).

    Because React Router allows you to configure routes and nested routes wherever you like, there's no global route configuration. In a way, React Router v4 is less opinionated on how you structure your routes, which can be awesome. However, this makes it difficult to parse the full route tree and make an accurate presentation in Redux.

  • slightlytyler: react-router-redux exists because people wanted to add redux functionality to a non-redux solution. lots of disagreement on if thats a good idea or not
    The most common stance of the react-router / react-router-redux team seem to be that integrating react-router into redux is unnecessary. So, the people developing react-router-redux doesn't really seem to believe in it's usefulness, which may or may not be valid. This seem to reflect on the level of integration that react-router-redux provides.

  • Paisley: if you want to take this approach to routing, maybe look at alternate libraries - redux-little-router or redux-first-router. i switched from RR to redux-first-router and found it just fitted perfectly what i was trying to do
    If you want full integration between your router and your redux state, you might be better off using a different router, such as redux-first-router, redux-little-router or curi.

I hope this helps anyone struggling with the same problems as I am when working with React Router and Redux.