React/Redux - コンポーネントをロードするときに複数の非同期呼び出しを処理する方法

Question

私はReact/Reduxをかなり使い慣れていますが、 私は実際に私に迷惑をかけるようなことがありましたが、気にするべき "本当の"問題であるとは確信していません。とにかく、ここにあります。

私はコンポーネントを持っているとしましょう。実際には、データベースから取得したレコードを更新するためのフォームです。このレコードには、異なるテーブルにいくつかの外部キーがあります。 （私のメインテーブルがで、Format、Type、Place ...そしてこれらのデータはすべて別のテーブルから来ているとします）。

ユーザーに外部キーごとに可能な値をすべて表示できるようにするには、データを取得するためにすべての異なるテーブルを要求し、それらをドロップダウンに表示する必要があります。取得されたデータによると、

dispatch(new CrudActions(places).getAll()); 
dispatch(new CrudActions(trainingFormats).getAll()); 
dispatch(new CrudActions(trainingTypes).getAll()); 

Reduxのアクションを派遣し、これらのラインのそれぞれ、およびので、状態の一部を更新します。今のところ

は、私のような何かをやっています。 その後、私のコンポーネントは、単に状態から値を取得します：それは実際に働いているが、結果である

function mapStateToProps(state) { 
    return { 
     places: state.places.list, 
     trainingFormats: state.trainingFormats.list, 
     trainingTypes: state.trainingTypes.list 
    } 
} 

：私のコンポーネントが再レンダリングさ、毎回アクションが終了し、状態を更新...のは、想像してみましょう私の主なトレーニングは10個の外部キーを持っています：更新フォームを表示する1ページの負荷のために、私のコンポーネントは10回レンダリングされます。 悪い公演はできませんか？外国のデータを取得するための良い方法はありますか？

Answer 1

私はそれを言い換えることができます。各レコードコンポーネントには、場所、トレーニングフォーマット、トレーニングタイプのドロップダウンがあります。ドロップダウンオプションは、ajaxを介して取得されます。複数のレコードがある場合、多くのリクエストと再レンダリングが行われます。

解決策：すべてのレコードコンポーネントがドロップダウン値を独自に取得するようにしないでください。それぞれのドロップダウンごとに、いずれも同じです。代わりに、親コンポーネントの1つにロードし、プロパティとしてレコードコンポーネントに渡します。たとえば、availablePlaces、availableFormats、availableTypesなどです。

親コンポーネントは、ajaxを介して使用可能なドロップダウンオプションを読み込む必要はありません。それで初期化することができます。

再レンダリングに関するさらなる最適化については、https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdateをご覧ください。

Facebookは、https://facebook.github.io/react/docs/react-component.html#componentdidupdateにajaxコールを作成することをおすすめします。