How to use redux thunk to redirect after success or error?
I am new to Promises and React. I am using reducex-thunk in my activity creators to resolve Promises and I am invoking activity creators from my component. How can I navigate to a different url after a successful or unsuccessful request? I am attaching the code for the action creator of the delete function.
Should I set the state with the (routeTo) parameter when I submit it, with success?
Here's the delete function:
export function deletePost(id){
var request = axios.delete(`${ROOT_URL}posts/${id}${API_KEY}`);
return function(dispatch){
request.then((response)=>{
console.log("I deleted"+response.data.title);
}).catch((error)=>{
console.log("DELETE_ERROR: "+JSON.stringify(error));
});
}
}
I am calling this function from onclick function in my component.
deletePost(){
this.props.deletePost(this.props.params.id);
}
source to share
The best way I've found for routing with a shortcut is to look at the URI part of my state and store it within the shortcut. There is a great react-router-redux library that does this for you.
Once you've configured your relay-router setup, you can simply dispatch actions to change location, so your teck would look like this:
import { push } from 'react-router-redux';
export function deletePost(id){
var request = axios.delete(`${ROOT_URL}posts/${id}${API_KEY}`);
return function(dispatch){
request.then((response)=>{
console.log("I deleted"+response.data.title);
dispatch(push('/delete-success-uri'));
}).catch((error)=>{
console.log("DELETE_ERROR: "+JSON.stringify(error));
dispatch(push('/delete-fail-uri'));
});
}
}
source to share