コンポーネントにRedux状態を渡すときのベストプラクティス

Question

私はReact + Reduxプロジェクトを他のいくつかの開発者と協力して作業しており、状態とアクションをどこに渡すべきかに関するベストプラクティスについては同意できません。

私のアプローチは、親コンポーネントである「コンテナ」または「プロバイダ」コンポーネントを持つことです。すべての必須の状態とアクションは、状態にマップされ、子コンポーネントに渡され、真の単一のソースを作成します。しかしそれは、それぞれの子コンポーネントを介してアクションと値を渡すことを忘れないようにする必要があります。従うのが難しい場合があります。

もう1つの開発者のアプローチは、スタック内の任意のポイントで、必要な各コンポーネントにmapStateToPropsを使用することです。したがって、3つまたは4つ下の子コンポーネントが特定の状態を必要とする場合、そのコンポーネントでmapStateToPropsを使用します。また、小道具と呼ぶのではなく、importキーワードを使ってアクションクリエイターを直接インポートします。私はこのアプローチが気に入らないのは、潜在的に州に複数回注射しているため、あなたの州や行動を1か所ですばやく切り替えることができないからです。

両方のアプローチにメリットとフォールバックがあることがわかりました。そこで、リアクションコンポーネントのスタックに状態とアクションを注入する場所とタイミングについての明確なベストプラクティスがあるかどうかが不思議でした。

Answer 1

私は比較的大きなReduxのコードベースに働いて、私たちは私が好き選び、アプローチがコンテナダムコンポーネントにレンダリングするアクションと、デリゲートを派遣コンポーネントにmapStateToPropsを使用して、第二のアプローチでした。

状態を渡すことなく、多くの場所でそれらを再利用できるようにします。あなたのトップ還元国は依然として真実の源ですが、mapStateToPropsはあなたがこのコンテナ内で必要とする州の一部にのみアクセスできるようにします。 Reduxのドキュメントは驚くほどよくやっている

、それをチェックアウト、それはそれはあなたが再来に接続するどのように多くの部品はあなた次第ですが、一般的にはより多くの連結成分を持つ話すことは、パフォーマンスのためのより良いですmapStateToPropshttp://redux.js.org/docs/basics/UsageWithReact.html

Answer 2

を実装するコンテナコンポーネントを推奨しています。詳細については、Redux FAQ on connecting multiple componentsと私のブログ投稿Practical Redux, Part 6: Connected Lists, Forms, and Performanceを参照してください。