React.jsは最初の関数の実行後にコールバック関数を設定しました

Question

私はReact.js/ReduxアプリケーションのonClickイベントでapiを呼び出しています。 apiを呼び出した後、最初のAPIの結果に基づいて別のAPIを呼び出す必要があります。だから私は非同期呼び出しについて考えていた。

マイコード：

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

及び方法のsendDataは

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); 
} 

である。しかし、同時に呼び出される両方のAPIをcurrenlty。助けて！

Answer 1

このシナリオをうまく処理するasync/awaitパターンの使用を検討する必要があります。あなたのコードは次のようになります。

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

しかし、あなたはPromise Sを使用することができ、最新の言語機能を使用することができない場合。コードはコールバック・ヘル（callback-hell）になりがちであり、ポリ充てん（polyfilling）も必要であることに注意してください。

約束と同じコードは次のようになります。

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

それだけsendDataApi(message).then(getDetails)に減少させることができるので、このコードは、約束の問題の単なる一例です。複雑な条件付きロジック、エラー処理、より多くのタスク、およびパラメータの引き渡しが発生すると問題が発生します。

リアクションは非同期性が非常に悪いので、Reduxを処理します。 redux-thunk、redux-sagaまたは別のミドルウェアを使用する必要があります。これにより、アクション作成者（continuation、trunk、saga - あなたの名前）から別のアクションをディスパッチできます。退屈になり、多くの定型文が必要になり、デバッグが非常に難しくなります。 Redux同期状態管理を終了し、そのような問題に対しては他の解決策（RxJSかもしれない）を検討することもできます。

see an example of using Promises to chain two asynchronous callsには、リアクトのデフォルトのsetState（コンソール出力を参照）を使用してください。 Reduxので非同期呼び出しを処理するのに最適な場所は、アクションの作成者に直接ある

... 

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