How to make a Action Call wait before proceeding another action call

Question

My setup is I have 2 main component, I have the NewForm and MainPage. When a user goes to NewForm, it will unmount the MainPage and vice versa

The NewForm is connected to a Web API so when the user submits, it sends the Data to the Web API and brings back a success response and redirects back to the Main Page.

While the MainPage has a table that displays all the Data also coming from the WebAPI. For now I made it to call the Web API every time it is mounted.

My current dillema is that after a user submits a form, it won't display the newly created data because it was still processing when it gets redirected to the MainPage and gets its data from WebAPI.

So on my research the best method I got is using Promise:

    newForm() {
    this.props.newDataForm(this.formdata).then(()=>{ 
        this.props.changePage("MainPage");
    }); 
}

But when I try running it, I'm getting:

TypeError: this.props.newDataForm(...).then is not a function

My action looks like:

export const newDataForm = (postData) => dispatch => {
return () => {fetch('http://localhost:81/api/value', {
method: 'POST', 
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(postData)}).then(function (data) {
  console.log('Request succeeded with JSON response', data);          
  dispatch({
    type: types.NEW_FORM,
    payload: data
})
}).catch(function (error) {
  console.log('Request failed', error);
})}

};

score 3 · Accepted Answer · answered Oct 23 '19 at 20:17

3

You need to return fetch

export const newDataForm = (postData) => dispatch => {
return () => fetch('http://localhost:81/api/value', {
method: 'POST', 
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(postData)}).then(function (data) {
  console.log('Request succeeded with JSON response', data);          
  dispatch({
    type: types.NEW_FORM,
    payload: data
})
}).catch(function (error) {
  console.log('Request failed', error);
})}
};

answered Oct 23 '19 at 20:17

marzelin

7,822
1
18
35

Stil getting the same error: "TypeError: this.props.newDataForm(...).then is not a function" after implementing the changes you put – Franz Justin Buenaventura Oct 23 '19 at 20:26
@FranzJustinBuenaventura `newChangeRequest` is a different thing than `newDataForm` – marzelin Oct 23 '19 at 20:28
Oops, I was hiding the real function names to make it easier to understand, my mistake on that. but yes it still doesn't work on when I call the function – Franz Justin Buenaventura Oct 23 '19 at 20:30
@FranzJustinBuenaventura what does your `mapDispatchToProps ` look like? – marzelin Oct 23 '19 at 20:35
Oh, it is empty. Do I need to declare anything on mapDispatchToProps? – Franz Justin Buenaventura Oct 23 '19 at 20:37
@FranzJustinBuenaventura how do you pass `dispatch` to `newDataForm` then? – marzelin Oct 23 '19 at 20:42
Hi Marzelin, I was following this guide: https://stackoverflow.com/questions/54054887/redux-how-to-call-an-action-and-wait-until-it-is-resolved I found my problem, aside from doing your changes. I should be returning my dispatch. Now it works after I made it to like this: export const newChangeRequest = (postData) => { return dispatch => fetch('http://localhost:81/api/value', {... – Franz Justin Buenaventura Oct 23 '19 at 20:49

How to make a Action Call wait before proceeding another action call

1 Answers1