How to handle two service calls in one submit button

Question

I am trying to implement an "update password" screen. I have two service call functions, first one is validating password which returns boolean and second one is updating password. The condition is that if first service response is true, then I want to call second service. The problem is that when I try to get first service call response before invoking second service call, those services are executed in parallel after submit function ends. So, these are not executed in a row.

I have tried calling these web services one by one in different functions in render method, meanwhile I added a condition to check first webservice response. If I get a response data from it, I invoke second function which calls second webservice.

   render()
{
... // screen render method
..
<Button onPress={() => { this.submit(); }}>Change Password</Button>
}

//Here is the submit function:
 submit() {

//first service call
this.props.validatePassword(param1, param2, param3, param4);

//reducer writes its value to "validatePass" in mapStateToProps



    if (validatePass) {  //boolean check
       //second service call 
        this.props.updateStrongPassword(param1, param2, param3, 
        param4);  
    }
  }

///
const mapStateToProps = function (state) {
  const result = {
    strongPasswordData: state.UpdateInformationReducer.strongPasswordData,

    validatePass: state.UpdateInformationReducer.validatePass,
  };
  return result;
};


function bindAction(dispatch) {
  return {
    updateStrongPassword: (param1, param2, param3, param4) => dispatch(updateStrongPassword(param1, param2, param3, param4)),
    validatePassword: (param1, param2, param3, param4) => dispatch(validatePassword(param1, param2, param3, param4)),
  };
}

These service calls are executed successfully but not in a row. There is no error at all. Thank you very much in advance.

Answer 1

What if you use make nested network requests using fetch and Promises and then update your store with response? Below is a simple example:

fetch("url").then(
        firstResponse => firstResponse.json()
            .then(fetch("anotherRequest")
                .then(secondResponse => secondResponse.json()
                .then(()=>{
                    // update your redux store here using firstResponse and secondReponse object.
                }))
            )
    )

Answer 2

You are using Redux so

Make your check and second API call componentWillReceiveProps(){}(in the old life cycle)

you will get validatePassword value after the first API call check it from componentWillReceiveProps and make the second API call from there.

componentWillReceiveProps(props){
   if (props.validatePass) { 
        this.props.updateStrongPassword(param1, param2, param3, 
        param4);  
    }
}

Remove the second API call from button click that is your submit() function

componentWillReceiveProps(props){
   if (props.validatePass) { 
        this.props.updateStrongPassword(param1, param2, param3, 
        param4);  
    }
}

       render()
    {
    ... // screen render method
    ..
    <Button onPress={() => { this.submit(); }}>Change Password</Button>
    }

    //Here is the submit function:
     submit() {

    //first service call
    this.props.validatePassword(param1, param2, param3, param4);


      }