非同期処理の順次実行方法 React + Redux

Question

React + Redux を使用していrます。
同一画面に、AというコンポーネントとBというコンポーネントがあるとします。

AもBも、それぞれ非同期処理でサーバからJSONを取得する構成にしました。

しかし、Aで取得したデータを、Bのパラメータとして使用する必要が出てきました。

その際、Aで確実にデータを取得後に、ステートに設定して、Bがそのパラメータを使用するとき、どのような制御処理ができるでしょうか？ Aデータ取得後に、Bデータ取得処理が走らせるようにディスパッチを投げようと思っていますが。

ディスパッチ後に走らせるイベント等はありますでしょうか？
若しくは、Aのレンダリング後に、Bが実行されるような方法等。

抽象的な質問ですみません。

Answer 1

まずreduxのstoreにAのloadingとBのloadingというpropertyを設けます。
actionを

dispatch(AloadingTrue)//Aのlodingをtrue
dispatch(BloadingTrue)//Bのlodingをtrue
ajax.get('Aのget通信API'){
then(A=>{
  dispatch(A)//Aの情報を格納
  dispatch(AloadingFalse)//Aのlodingをfalse
  ajax.get('Bのget通信API'){
  then(B =>{
  dispatch(B)//Bの情報を格納
  dispatch(BloadingFalse)//Bのlodingをfalse
  })
})
}

として、viewを

Aloading ? <Loading/> : <A/>
Bloading ?<Loading/> : <B/> 

のようにすればいいと思います。