React：componentDidMountを再実行する兄弟コンポーネントを再マウントするにはどうすればいいですか？

Question

私のアプリケーションでは、ユーザーには複数の..「犬」と言うことがあります。現在選択されている犬がヘッダーに表示され、ヘッダーのドロップダウンメニューから変更できます。新しい犬を選択すると、それはバックエンドにprimary: trueとしてマークされ、対応するヘッダーUIを更新します。その時点から、バックエンドへのすべての要求はprimary犬の結果を返します。

私はこのようになりますLayout.jsxコンポーネントがあります：this.props.childrenで

<Header /> 
<div> 
    {this.props.children} 
</div> 

を、私はネットワーク要求が行われたTreatsContainerかもしれないが、複数の異なるリソースのためのインデックスページをレンダリングする子コンポーネントの例、すなわちcomponentDidMount〜/treatsにあり、結果は私のレイアウト内に表示されます。

私が直面している問題は、ユーザーがヘッダーコンポーネントで犬を変更したときに、他のコンポーネントがcomponentDidMountで作成しているのと同じネットワークリクエストを再実行して、新しく選択した犬データが表示されます。私はReduxをアプリケーション内のいくつかの場所に実装していますが、ユーザーが作成できるリソースの数に制限はないため、グローバル状態ツリーにすべてのデータを格納しないことをお勧めします。私がこれを意味するのは、配列の束に、/treats、/toys、/foodsなどのすべてのデータが必要なわけではありません。この状況を処理するための良いアプローチは何でしょうか？

Answer 1

私はあなたの質問を完全に理解しているとは確信していませんが、私はまだ私の能力の中で最高の答えにしようとします。私が理解したところでは、primary dogを設定するHeaderコンポーネントがあります。このprimary dogが変更されたときに、子供のコンポーネントがバックエンドから新しいデータを取得するようにします。私はこれを達成するであろう

方法はReduxのストア内

1. ストア現在primary dogであり、それが変化したときに、それを更新するために、あなたのHeaderコンポーネントでアクションを発射します。各子コンポーネントから
2. 、それぞれの子コンポーネントでmapStateToProps
3. を使用して小道具としてストアからprimary dogにアクセスし、this.props.primaryDog != nextProps.primaryDog

Answer 2

は、私は同意するときcomponentWillReceivePropsに関連するデータをフェッチするために、バックエンドへの呼び出しを行います

、

URLにprimary dogのIDを入れて：@ palsrealmの提案のアプローチは、しかし、ここであなたがreact-routerを使用している場合は、1つの代替です10

<Route path="/:dogId" component={DogIndex} /> 

ユーザーがプライマリドッグを選択すると、インデックスページにルーティングできます。

<Link to=`/${selectedDogId}` /> 

次に、あなたのコンポーネント（DogIndex）がマウントされ、componentDidMountが発生します。