Redux: Question: The proper way to handle initiating a route change after an action completes?

Created on 24 Sep 2015 · 4Comments · Source: reduxjs/redux

Let's say I have a search form that the user fills out. They click submit, and an ActionCreator is fired to perform the search. When the search response has completed, I want to transition the user to a new route.

Is the best way to do this to simply have a search reducer that has a value that changes searchComplete to true, and then use a lifecycle hook like componentDidUpdate to check for that and then initiaite the transition?

I know that is the router was powered by Redux in the first place, the Action creator would just trigger another action to do the transition, but that is not the case here.

Or is it legitimate to pass a callback to the action creator that gets called when the data has finished being added to store? That doesn't seem very Fluxy.

Is componentDidUpdate the right place for this?

question

Source

duro

👍5

Most helpful comment

You can use componentWillReceiveProps in a way like you described.
You can use redux-router (ex redux-react-router) which lets you express transitions as regular Redux actions. You can use redux-thunk to combine a search async action with a router transition action.
You can have your async action return a Promise (via redux-thunk, redux-promise or something else), wait for it from your component, and then just call this.context.history.pushState(null, nextUrl).

gaearon on 24 Sep 2015

👍10

All 4 comments

You can use componentWillReceiveProps in a way like you described.
You can use redux-router (ex redux-react-router) which lets you express transitions as regular Redux actions. You can use redux-thunk to combine a search async action with a router transition action.
You can have your async action return a Promise (via redux-thunk, redux-promise or something else), wait for it from your component, and then just call this.context.history.pushState(null, nextUrl).

gaearon on 24 Sep 2015

👍10

Thanks @gaearon, these are great suggestions. I am using react-native, so for now redux-router is off the table. That said, I also created an issue (rackt/redux-router/issues/63) in that repo which offers some suggestion on how that project could move towards a react-native version.

duro on 24 Sep 2015

I took a quick peek at the Alt project they mention and it seems that it is
just shimming the router? It does not seem like a lot of code…

On Thu, Sep 24, 2015, 19:32 Adam Duro [email protected] wrote:

Thanks @gaearon https://github.com/gaearon, these are great
suggestions. I am using react-native, so for now redux-router is off the
table. That said, I also created an issue (rackt/redux-router#63
https://github.com/rackt/redux-router/issues/63#issuecomment-142774610)
in that repo which offers some suggestion on how that project could move
towards a react-native version.

—
Reply to this email directly or view it on GitHub
https://github.com/rackt/redux/issues/791#issuecomment-142997552.

Wout.
(typed on mobile, excuse terseness)

wmertens on 25 Sep 2015

My app was crashing when I put the routing logic inside of componentWillReceiveProps() lifecycle hook (I am using wix/react-native-navigation and had to use setTimeout of 1ms to overcome it)..

Then I realized that componentDidUpdate() seems to be a much better place for performing this operation because I believe when we use componentWillReceiveProps(), React is ready to render the component but triggering a route change, interrupts React's flow and it is not able to close the current flow properly. On the other hand componentDidUpdate() seems better because after the re-render, React is not waiting on anything and we are free to perform the navigation.

This is my basic understanding of the scenario. I am more than welcome to a better suggestion though.

Cheers