Transition to a route on successful async Redux action - reactjs

Question

When I am deleting the category with an API call, Redux doesn't wait for all actions to complete. Sample action below:
export const deleteCategory=(id)=>{
return dispatch=>{
const message='Category Deleted Successfully!'
dispatch(deleteCategoryStart())
axios.delete(`http://127.0.0.1:8000/admindashboard/categories/${id}/`)
.then(res=>{
dispatch(deleteCategorySuccess(message))
}).catch(err=>{
dispatch(deleteCategoryFailed(err))
})
}
}
My code to handle the delete:
handleDelete= (event) =>{
event.preventDefault();
this.props.deleteCategory(this.props.match.params.categoryID);
this.props.history.push('/categories')
}
I am trying to delete the category and redirect the user to the "all categories" page. Instead, it's redirecting the user before all action dispatches are completed. The new categories page/component calls additional actions, getting all categories.
Action sequence:

Answer 1

JavaScript explicitly won't wait for your external process (API call) to complete. You can use async/await or change your code similar to below
export const deleteCategory = (id) => {
return dispatch => {
dispatch(deleteCategoryStart());
return axios.delete(`http://127.0.0.1:8000/admindashboard/categories/${id}/`);
}
}
handleDelete = (event) => {
event.preventDefault();
this.props.deleteCategory(this.props.match.params.categoryID).then(res => {
const message='Category Deleted Successfully!';
this.props.dispatch(deleteCategorySuccess(message));
this.props.history.push('/categories'); // Push to the page here
}).catch(err => {
this.props.dispatch(deleteCategoryFailed(err));
});
}