Ilja Ilja - 3 months ago 11
React JSX Question

Correct way to call functions "step by step"

I have certain functionality that requires me to make one api call to retrieve certain id that is used in second api call, logic wise it would look like this:

componentWillMount () {
this.props.functionOne()

// Wait for functionOne to complete before calling this
this.props.functionTwo(this.props.paramFromFunctionOne)
}


where
this.props.paramFromFunctionOne
is something stored in redux state once function one completes.

Answer

As I correctly understand, you can achieve it this way:

componentWillMount () {
  // As `axios` returns promise, you should return it from `functionOne`
  // This way you can be able to use `.then` method.
  this.props.functionOne()
    .then(() => {
      // This code block would be executed after api call from first function will be finished.
      this.props.functionTwo(this.props.paramFromFunctionOne)
    });
}