React Redux：小道具のデータを使用するか、またはredux-storeから直接データを取得しますか？どちらがいいですか？

Question

それが重複している場合はご容赦ください。

私はちょうど良いOpen source React+Redux projectsを通過していましたが、これはほとんどすべてのコンポーネントにストアから直接データを取得しようとしたOry-editorを介して来ました。

例 -

const Inner = ({ 
    isInsertMode, 
    insertMode 
}: { 
    isInsertMode: boolean, 
    insertMode: Function 
}) => (
    <Button 
    icon={<ContentAdd />} 
    description="Add things" 
    active={isInsertMode} 
    onClick={insertMode} 
    /> 
) 

const mapStateToProps = createStructuredSelector({ isInsertMode }) 
const mapDispatchToProps = { insertMode } 

export default connect(mapStateToProps, mapDispatchToProps)(Inner) 

は、これはその良い練習なら、私はすべてのコンポーネントのReduxのストアから直接データを取得する不思議作られたか、それは小道具に反応使用してデータを渡す方が良いです。

どちらの方が優れていて高速ですか？そして、リアクトの基本原則を傷つけることはありません。

Answer 1

propsでデータを渡しても、redux-storeから取り出すためには、一度に必要となります。

他のコンポーネントからデータを渡している場合は、そのコンポーネントをと混在させてとし、1つでも3-4-5レイヤーでデータを渡すことになります。

redux-storeの美しさは、あなたがそれゆえ部品をデカップリング、どこでもstoreにアクセスできることです。

Answer 2

リアクションには、「スマート」と「ダム」のパターンがあります。コンテナとプレゼンテーションのコンポーネントと呼ばれることがよくあります。

私はそれが言うこの非常に役立つ記事https://jaketrent.com/post/smart-dumb-components-react/た：

Smartコンポーネント特性

• は物事が
• をどのように機能するか説明が提供するいかなるDOMのマークアップやスタイル
• を提供しませんアプリケーションデータ、データフェッチを行う
• のコールフラックスアクション
• 名前*大会

ダムコンポーネント特性

• をすることによりコンテナ物事がデータを提供し、
が
• のみ小道具を受信何らアプリの依存関係を持っていない見てどのように記述し、コールバック
• まれに自分の状態があります。私は助けることができるUIの名詞

希望です何も名前付きUI状態

！

Answer 3

私の提案は、必要ならば、connectとcreate smartを使うよりも、まずComponentBaseのようなダムコンポーネントを書くことです。これは、再利用コンポーネントが必要な場合に便利です。小道具を直接渡すことも、新しいコンポーネントをconnectで作成して、ComponentBaseを別の店舗に接続することもできます。

このアプローチは、テストや、たとえばストーリーブックを使用している場合などにも適しています。 Redux FAQ entry on connecting multiple componentsパー

Answer 4

：

早期Reduxのドキュメントには、あなただけのコンポーネントツリーの上部付近にいくつかの連結成分を持つべきであると助言しました。しかし、時間と経験によれば、一般的に、すべての子孫のデータ要件について多くのことを知るためには少数のコンポーネントが必要であり、混乱した数の小道具を渡すよう強制されます。

現在の提案のベストプラクティスは、「プレゼンテーション」または「コンテナ」コンポーネントとして、あなたのコンポーネントを分類し、それが理にかなってどこ接続されているコンテナコンポーネントを抽出することである。

は、「一番上に1コンテナコンポーネント」を強調Reduxの例では間違いでした。これを極秘にしないでください。プレゼンテーションコンポーネントを別々にしてください。便利なときにコンテナコンポーネントを接続してコンテナコンポーネントを作成します。同じ種類の子どものためのデータを提供するために、親コンポーネントのコードを複製しているような気がする場合は、コンテナを抽出する時間をとってください。一般的に、親が子どもの「個人的な」データや行動についてあまりにも多くのことを知っていると感じるとすぐに、コンテナを抽出する時間。

実際、ベンチマークでは、接続されたコンポーネントの数が多いほど、一般に接続されているコンポーネントの数よりもパフォーマンスが向上することが示されています。