React.js set callback function after execution of first function

Question

I have been calling an api on onClick event of my React.js/Redux app. After calling the api, I have to call another api based on the results of first API. So I was thinking about async calls.

My code:

<a href="" onClick={(e) => this.sendData(e)} >Send</a>

and method sendData is

sendData(e){
    e.preventDefault();
    this.props.sendDataApi({this.refs.msg.value});
    //After receiving results from above api, i have to call another api async
    this.props.getDetails(this.refs.txt.value);
}

But currenlty both APIs called at the same time. Any help!

the best place to handle async calls with redux is directly in action creator. I mean wait for result of async call in action creator — madox2, May 14 '17 at 17:52

score 2 · Accepted Answer · answered May 14 '17 at 22:24

You should consider using async/await pattern which handles that scenario well. Your code would then look like this:

const sendData = async message => {
    const messageId = await sendDataApi(message)
    const details = await getDetails(messageId)
    return details
}

However, if you are not able to use newest language features you may use Promises. Keep in mind that the code will be more prone to callback-hell and that they might also need polyfilling.

The same code with promises would look like this:

const sendData = message => {
    sendDataApi(message)
    .then(messageId => getDetails(messageId))
}

This code is a mere example of the issues with Promises because it can be reduced just to sendDataApi(message).then(getDetails). Problems arise when there are complex conditional logic, error handling, more tasks, and parameter passing.

React handles asynchrony very poorly so do the Redux. You need to use redux-thunk, redux-saga or another middleware. With that, you will be able to dispatch another action from the action creator (continuation, trunk, saga - you name it). It can become tedious, require much boilerplate, and be very difficult to debug. You may consider leaving Redux synchronous state management and consider other solutions (RxJS maybe?) for those kinds of problems.

Please see an example of using Promises to chain two asynchronous calls using React's default setState (see console output).

With redux-thunk the implementation might look like this (other actions not show, no error handling etc.):

...

const sendData = message => {
  return dispatch => {
    return sendDataApi(message).then(
      messageId => dispatch(getDetails(messageId)),
    );
  };
}

Thanks for detailed reply, I will use this to resolve my problem. Much appreciated! — h_h, May 15 '17 at 07:14
I used async, await technique, and it worked. Thanks again. For those who see this question in future, please use `babel-polyfill` as it is required to use async, await in React. For reference check this: http://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined-with-async-await — h_h, May 15 '17 at 07:29

React.js set callback function after execution of first function

1 Answers1