React SPA architecture questions

Question

React SPA（アカウント情報&設定ページ）のアーキテクチャが正しいかどうかわかりません。あなたはこれについていくつかのフィードバックを与えることができますか？

1. ラッパーコンポーネントを作成しました。これは、状態を保持し、その状態を更新するためのRest APIメソッドを呼び出すために使用されます。私は一番外側の親に1つのアプリ状態だけを残すことにしました。

2. 他のコンポーネントでは、州の小道具をレンダリングし、コールバック（入力テキストの変更など）のみを使用して、Wrapperコンポーネントのメソッドを呼び出して状態を変更します。

私は、ネストされた子にコールバックを渡す問題に直面しました。

5つのネストされた子コンポーネントがある場合、同じコールバックを小道具を経由して最も内側の子だけでなく小道具にも渡す必要があります。それは壊れているようですが、これを避ける方法はありますか？

Reduxはこのような問題を解決する傾向がありますか？ Reactアプリケーションアーキテクチャのエンタープライズ標準はありますか？

Answer 1

あなたの問題は一般的な問題であり、常に単純な解決策ではありません。解決何Reduxの

：

をあなたのウェブサイトに4深くネストされたSearchComponentsを持って、1で検索すると、検索をトリガする必要があり、それは同じ検索だが、handleSearch機能は4回通過する必要があります。

ソリューション：
現在検索されているもののAppWideStateを変更するReduxのを使用して、ReduxのストアにSearchComponentを接続します。

一方、あなたの現在のcontainerComponentでは、現在の検索要求をストアに渡してAJAX要求をトリガーすることができるため、集中化され、4コールバックを渡す必要はありません。

何Reduxの（箱から出して）

を解決していないあなたは、インターネットからいくつかのクールな入力フィールドをダウンロードして、あなたのウェブサイトでの4ヶ所でそれを使用したい、しかし、あなたはへのアクセス権を持っていませんソースコード、コンポーネントがreduxに接続されていない場合は、最初のアプローチを使用できないようですが、部分的にしか当てはまりません。この時点でWrapのコンポーネントをダウンロードしてwrapperComponentの周りにダウンロードすることができます。これにより、最初の方法を再度使用することができます。まさに最初の2つの例

をサポートしていません

物事はあなたのsearchComponentsは、他の人が消費することができ、アプリ全体の状態変化を誘発することを想定しています。しかし、更新する範囲を制限したい場合、Reduxはもはや良い選択ではありません。
グローバルなappStateを汚染しないようにすることは重要です。特に、それが親コンポーネントである場合は、1つのコンポーネントだけが重要です。
すべてをコールバックの必要性を排除してReduxに接続することはできますが、それは明らかに優れた設計方法ではありません。
グローバルスコープでは必要ないものの、深くネストされているものは、Reduxによって解決されません。