React-router: Redux Integration (ControlledRouter)

[nickydonna]

Hi, we are starting to migrate from Angular to React+Redux, and we are planning on using a routing system, but the old version of ReactRouter had some issues when using Redux. V4 seems a lot better for that, and in the faqs you talk about a ControlledRouter close to being published, but I can seem to find it.

We (me and the other developers) would like to help you with the development, since is essential to out product, where can we find the _ControllerRouter_ and how can we help??

Cheers

PS: I mention @JulianMayorga since he is one of my teammates.

[timdorr]

We don't have anything here. But it would be a great addon library. I would be more than happy to give up the react-router-redux repo or have it live on that project.

[nhagen]

From the FAQ:

We have a <ControlledRouter> close to being published that makes redux integration with React Router the same as ... uh ... integrating an with Redux.

I'm a little confused now.

[timdorr]

@nhagen There's nothing here, as in "on this repo" here. Addons like ControlledRouter or static, top-level routes are not going into the core of 4.0. They will be externalized in same way. This might end up being a monorepo (Babel-style) or they might get their own separate repos. Nothing's been decided yet and all of this stuff is still very much in progress.

[mjackson]

I know that @ryanflorence has done some work on a <ControlledRouter> and was planning to release it as an addon. But we could possibly put it in the react-router-redux project too.

I'm a little confused now.

Don't be :) The API for a <ControlledRouter> looks like this:

<ControlledRouter location={ pathname: '/' }/>

You can think of <ControlledRouter location> like <input value>. When you set it, the router automatically reflects that value.

[nickydonna]

We where thinking on how to implement the API that @mjackson mentioned:

class ControllerRouter extends Component {
  componentDidUpdate() {
    //Make some check to avoid pushing the same route many times
    browserHistory.push(this.props.location.pathname)
  }
}

Is it as easy as this??

browserHistory#push was the only way we found to change routes from the code

[mjackson]

If you do a PUSH every time you'll increase the history stack. It would be like every time you give your <ControlledRouter> a new location, someone clicked on a link, which isn't what you always want. Sometimes you may want to go back, for example. Or undo the most recent location change.

[steida]

https://gist.github.com/steida/16da36887e6e6b466e12ba3a4ae6ce87

[ryanflorence]

I have the code, just need to package it up. on vacation with family but
maybe after los niños are in bed I can do it, if not, I'll just post a gist
you can use
On Fri, Sep 16, 2016 at 6:30 PM Daniel Steigerwald [email protected]
wrote:

https://gist.github.com/steida/16da36887e6e6b466e12ba3a4ae6ce87

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3879#issuecomment-247741333,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaOxoC9nuW-bAL75Zq8WByTWn-1EWks5qq0KtgaJpZM4J-9cN
.

[steida]

Just gist us what you have and enjoy the vacation with your family unwired. There is no show stopper in RR4.

[nickydonna]

Based on @steida's version we've created (with @JulianMayorga) a version that change react to state changes

https://gist.github.com/donnanicolas/3d76397a92551f449637590bf0413133

[timdorr]

I'll put something on react-router-redux as a 5.0 branch soon. We'll settle on a particular "best" implementation soon, but @donnanicolas has the right idea.

[ryanflorence]

sorry everybody, I just keep forgetting to put code up, at least you'll
appreciate it more after trying yourself!
On Thu, Sep 22, 2016 at 1:07 PM Tim Dorr [email protected] wrote:

I'll put something on react-router-redux as a 5.0 branch soon. We'll
settle on a particular "best" implementation soon, but @donnanicolas
https://github.com/donnanicolas has the right idea.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3879#issuecomment-249013519,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaD_N1fDU_CyQy2-9A09sQL7k5JJUks5qsuAZgaJpZM4J-9cN
.

[dlebedynskyi]

don't know if this is a right place to ask or should open another issue.
tl;dr; How to integrate async data loading on server for universal app with react-router^4 ?

common task that we now have to do is to fetch some data on server before render, put it into redux state (so using ControlledRouter it seems with ^4), then sync stuff on client.

as one lib that does something like this - Redial. https://github.com/markdalgleish/redial. Please look at example there to see code. Or https://github.com/ryanflorence/async-props by @ryanflorence
These are not the only option out there but all libs for this basically depend on match and renderComponents.

Would be great if you guys supply some way of supporting this. Maybe someway to promisify/async render for ControlledRouter or basic Router?

[steida]

@dlebedynskyi I do this https://github.com/este/este/commit/47efea50fcee5761cf406f2240bdeda8f75c1031 No library is needed.

[timdorr]

Tracking a possible implementation here: reactjs/react-router-redux#460 Thoughts, improvements, major refactors are all welcome!

[dlebedynskyi]

@steida Thanks this looks like a good approach. I'll check it out

[gaelduplessix]

Created a ControlledRouter based on @steida's and @donnanicolas gist: https://gist.github.com/gaelduplessix/050e5cce31f9fabb1030f4ba47663db5

Currently porting my React/Redux app with it, seems to work fine :)

[kevinold]

FYI, Ryan posted his ControlledRouter here: https://github.com/ReactTraining/react-router/issues/3905#issuecomment-250991161

[alisd23]

@dlebedynskyi I made a library for exactly what you're looking for (I think). I had the same issue but with MobX - should work for either. https://github.com/alisd23/react-async-actions

[bdudelsack]

Can anybody please provide an example how to integrate the ControlledRouter from Ryan (#3905) with Redux? The onChange part is clear but how can i bind the location to the state? How to provide history and action correctly to the ControlledRouter?

[steida]

@bdudelsack I don't believe that piece of code really works also RR4alpha4 has its own issues. I recommend do not migrate yet.

[dlebedynskyi]

@alisd23 yeah we ended up with something similar. note that react is strongly thinking of ditching componentWillMount in favor of constructor.

[ryanflorence]

A real controlled router is coming, the enthusiasm is great but please
remember we're still in alpha with this stuff.
On Thu, Oct 6, 2016 at 7:23 PM dlebedynskyi [email protected]
wrote:

@alisd23 https://github.com/alisd23 yeah we ended up with something
similar. note that react is strongly thinking of ditching
componentWillMount in favor of constructor.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3879#issuecomment-252138439,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaH9718Z1sMuuuM45WJz4951WDba5ks5qxa0EgaJpZM4J-9cN
.

[gaelduplessix]

Yup, thanks for your work @ryanflorence but I think we've been a bit too enthusiast right now. We already migrated some of our code to v4 (and loved it!) but I guess we're gonna have to revert to the previous version for now :(

[timdorr]

This is now available as an addon. I've also got the next version of react-router-redux started on a similar path. So, we've got some options for everyone now.