where and how I can catch the event that every form has been submitted
successfully and I need to redirect user to another page.
As you are submitting all the forms at the same time , i encountered the same problem , thats how i managed to resolve this issue:
Callback function passed to action creator (createPost)
onSubmit(values){
this.props.createPost(values, () => {
this.props.history.push('/');
});
It will not redirect the user unless posts(forms) are successfully posted to the backend api or database , in this case user will be programmatically redirected to the ('/') index.html , You can pass any Route to this.props.history.push(' ')
as long as that <Route />
exists in <BrowserRouter> ('react-router-dom')
the main (index.js) file
Inside action creator , i used axios to make a post request to backend API and once its successfully posted .then() i passed a callback function to redirect the user
import axios from 'axios';
export const CREATE_POST = 'create_post';
const ROOT_URL = 'http://xyz.app.com/api';
const API_KEY = '?key=xxxxx';
export function createPost(values, callback) {
const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, values)
.then(() => callback());
return {
type: CREATE_POST,
payload: request
};
}
You can read more about programmatically navigation Here