1. ホーム
  2. ジャバスクリプト

[解決済み】React-ReduxとmapStateToProps()を理解する。)

2022-04-08 10:20:39

質問

react-reduxのconnectメソッドと、それがパラメータとして受け取る関数について理解しようとしています。特に mapStateToProps() .

私の理解では、戻り値の mapStateToProps はstateから派生したオブジェクトになり、そのキーはpropsとしてターゲットコンポーネント(connectが適用されるコンポーネント)に渡されます。

つまり、ターゲットコンポーネントが消費する状態は、ストアに保存されている状態とは全く異なる構造を持つ可能性があるということです。

Q:これでいいのでしょうか?

Q:これは想定内ですか?

Q:これはアンチパターンなのでしょうか?

解決方法は?

Q: Is this ok?

A: はい

Q: Is this expected?

はい、これは(react-reduxを使用している場合)予想されることです。

Q: Is this an anti-pattern?

A: いいえ、これはアンチパターンではありません。

これは「コネクティング」とも「スマート化」とも呼ばれます。これは設計上のものです。

これにより、コンポーネントとステートの分離をさらに進めることができ、コードのモジュール性が高まります。 また、コンポーネントのステートをアプリケーションのステートのサブセットとして単純化することができ、実際、Reduxパターンに準拠するのに役立ちます。

このように考えてみると、ストアには 全体 の状態です。

大規模なアプリケーションでは、何層にもネストされた何十ものプロパティが含まれる可能性があります。

呼び出しのたびにそのすべてを持ち運びたくはないだろう(高い)。

なし mapStateToProps またはその類似品で、パフォーマンス向上や単純化のために別の方法で状態を切り分けたくなることでしょう。