Reactjs redirect from an action - reactjs

Question

I am trying to implement react router version 4. Please find the bare minimum code which I have now as below:
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '#progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';
export default () => (
<BrowserRouter>
<div>
<div className="col-xs-12 col-sm-6 col-md-12">
<header className="App-header">
<h1 className="App-title">TestUsers</h1>
</header>
<Menu>
<MenuItem>
<Link to="/users">Users</Link>
</MenuItem>
<MenuItem>
Shelves
</MenuItem>
<MenuItem>
Products
</MenuItem>
</Menu>
</div>
<Switch>
<Route exact path="/users" component={Users} />
<Route exact path="/users/add" component={Users} />
<Route exact path="/users/:id" component={Users} />
</Switch>
</div>
</BrowserRouter>
)
I have been able to add a user successfully. I want to redirect to user's list page from the action which adds a user. Please find the action code below:
export function addUser(objData) {
return function (dispatch) {
axios.post(
'http://localhost:4000/api/v1/users',
{
'name': objData.name,
'email': objData.email
}
)
.then((response) => {
dispatch({ 'type': ADD_USER, 'payload': true });
// TODO: programmatically redirect using react-router v4
})
.catch((error) => {
console.log(error);
});
}
}
I have been struggling to implement the same. Could anyone please point me in the right direction.
Thanks

Answer 1

You can Use Callback
export function addUser(objData, onSuccess, onFail) {
return function (dispatch) {
return axios.post(
'http://localhost:4000/api/v1/users',
{
'name': objData.name,
'email': objData.email
}
)
.then((response) => {
dispatch({ 'type': ADD_USER, 'payload': true });
onSuccess()
})
.catch((error) => {
//you can handle error on your component
onFail(error);
});
}
}
Then Call addUser like this on the component.
addUser(
objData,
() => this.props.history.push('/your-user-list-component'),
() => {// handle the error here.}
)

Answer 2

you could return Promise from your action:
export function addUser(objData) {
return function (dispatch) {
return axios.post(
'http://localhost:4000/api/v1/users',
{
'name': objData.name,
'email': objData.email
}
)
.then((response) => {
dispatch({ 'type': ADD_USER, 'payload': true });
// TODO: programmatically redirect using react-router v4
})
.catch((error) => {
console.log(error);
});
}
}
then in a component:
componentDidMount(){
this.props.addUser(objData).then(() => {
this.props.history.push('/somwhere')
})
}

Answer 3

use this.props.history.push('/some/path') after dispatch action
I would also advise you to check if response.status is equal to 200

Answer 4

You can use the history module.
Create history.js file
//history.js
import createHistory from 'history/createHashHistory'
export default createHistory()
Update your router with the new history. You need to use Router instead of BrowserRouter.
import React from 'react';
import { Router, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '#progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';
import history from './history';
export default () => (
<Router history={history}>
...
</Router>
);
And now you can navigate programmatically.
import history from './history'
export function addUser(objData) {
return function (dispatch) {
axios.post(
'http://localhost:4000/api/v1/users',
{
'name': objData.name,
'email': objData.email
}
)
.then((response) => {
dispatch({ 'type': ADD_USER, 'payload': true });
// TODO: programmatically redirect using react-router v4
history.push(path)
})
.catch((error) => {
console.log(error);
});
}
}

Answer 5

In react-router 4, there was introduced <Redirect /> component, which is returned in the render() method to achieve what you need. The redirect component is also imported from react-router-dom so: import { BrowserRouter, Route, Link, Redirect } from 'react-router-dom';
class MyComponent extends React.Component {
state = {
redirect: false
}
handleSubmit () {
axios.post(/**/)
.then(() => this.setState({ redirect: true }));
}
render () {
const { redirect } = this.state;
if (redirect) {
return <Redirect to='/somewhere'/>;
}
return <RenderYourForm/>;
}