Best practice to redirect within action creator?

[olalonde]

There seems to be two ways to redirect from an action creator (react-redux):

1. Use withRouter() on component which calls the action creator and pass props.router to the action creator (e.g. dispatch(login(username, password, this.props.router)) and router.push('/success') inside my action creator)

2. import { browserHistory } from 'react-router' inside the action creator file and browserHistory.push('/success') as mentioned here: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

I was wondering which one would be preferable.

[timdorr]

You're calling the exact same function in both cases. But since you might use your action outside of the React context, you should probably use browserHistory.

[murashki]

Guys, what about 4.0.0 version?

[malimccalla]

How do we do this in v4?

[pshrmn]

Starting with the beta, the answer will be the same. If you need to navigate outside of React, you can create your own history instance and import it throughout your project.

[wjin0352]

How do we do this in v4???

[thekarel]

@wjin0352

The simplest working example:

history.js:

import createHistory from 'history/createHashHistory'

export default createHistory()

actions.js:

import history from './history'

history.push('/abc')

[Aprillion]

@thekarel unfortunately, react-router-dom does not re-render the component that I pass to a Route when using push this way, but it works (i.e. re-renders the component) when I pass this.context.router.history.push into my action creator...

is that a general problem or only happening in my use case => should I create a simplified test case?

[m-mik]

@Aprillion That's the expected behavior. Take a look at: #4059 (comment)

1. Creating a new browserHistory won't work because BrowserRouter creates its own history instance, and listens for changes on that. So a different instance will change the url but not update the BrowserRouter.

2. browserHistory is not exposed by react-router in v4, only in v2.

If you want the full history object you can also grab that off context like router.
this.context.history.push('/path')

[Aprillion]

@m-mik I understand that 2 instances of browserHistory would not communicate, but it was definitely NOT my expectation that creating single instance directly from history module, importing to multiple files, using it as <Router history={myHistory} and then running myHistory.push in another file somehow does not re-render the routed component in v4

[m-mik]

@Aprillion Are you sure you're using Router, and not BrowserRouter when passing the history instance? Perhaps, you're importing BrowserRouter as Router?

import { BrowserRouter as Router } from 'react-router-dom'
...
<Router history={history}> // this won't work, BrowserHistory does not accept history property

---

history.js

import createHistory from 'history/createBrowserHistory'

export default createHistory()

Root.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

another_file.js

import history from './history' 

history.push('/test') // this should change the url and re-render Test component

[Aprillion]

that was probably it.. I didn't get any proptypes error, so I forgot to check.. thanks @m-mik for the tip, I will try again!

[vvinhas]

Hey guys, is history navigation inside actions considered a good practice? I try to avoid it at all costs but I'm in a situation where this approach would be easier to implement.

[Aprillion]

@vvinhas I probably don't understand the question, for me history navigation can ONLY happen as an action.

e.g. <Link>is just a component that wraps the onClick event handler creating a history action (push). so a custom history action would be similar but using a custom component instead of a library-provided one.

I can't imagine when it would make sense to navigate back inside render, constructor, redux reducer, selector or something else, only inside an event handler => action creator.

But if you have a different concrete example..?

[vvinhas]

Hey @Aprillion! Thanks for your reply!

My case is an auto redirect, based on a response from a Http Request. I know it's easier to put history.push into my thunk, but generally, I let my components decide when to redirect the user based on Redux State, wrapping withRouter around it and using the history prop.

I'm actually asking it honestly, I don't know if it's a common practice to put history.push inside a thunk.