React/Reduxディープ・プロップdependecy

Question

私はReact/Reduxアプリケーションをどのように構築するかについて質問があります。

コンテナをのコンポーネントの中に参照することは、わかっている限り、推奨されていません。しかし、Reduxアプリケーションでコンポーネントを入れ子にした場合、最上位のコンテナはconnect()とmapStateToPropsなどでバインドされますが、すべての行を-only-コンポーネントに渡すのが奇妙に思えます。

のように例えば、ネストされたコンポーネントとアプリケーションを構築する：入力コントロールが、私がすべての方法ダウン小道具を渡す必要があろうと私には奇妙なようpropのisVisibleを、持っている可能性が

Dialog > Form > Tab > Input Section > Input control 

木。

私の質問は主に、これが本当に推奨されていることと、これはどのように処理されるのでしょうか？たとえば、次のように小道具を設定して簡略化していますか：

{ 
    inputProps: { visible: false } 
} 

？

または、コンポーネント内のコンテナを参照できるので、実際に関連する小道具のみについてを別途connect()にすることはできますか？

Answer 1

Reduxの主な点の1つは、個々のコンポーネントがストアに接続し、必要なデータを抽出できるようにすることです。また、コードベース内のものを分離するという観点から、 "コンテナ/コンポーネント"の全体を過度に思考しないでください。

複数のコンポーネントを接続する方法については、https://redux.js.org/faq/react-redux#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-treeのRedux FAQエントリを参照してください。https://twitter.com/dan_abramov/status/802569801906475008のDan Abramovのツイートでは、「コンテナ対プレゼンテーション」の構造について考えてください。

Answer 2

多くのプロパティを渡している場合は、はのコンテナにする必要があります。

例としてredux-formとしてください。それは完全にコンポーネントに関するすべてのことができますが、彼らは同様に還元を使用することに決めました。