[解決済み】React-ReduxとmapStateToProps()を理解する。)
質問
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
またはその類似品で、パフォーマンス向上や単純化のために別の方法で状態を切り分けたくなることでしょう。
関連
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reduxのアクションをタイムアウトでディスパッチする方法とは?
-
[解決済み】Reduxの@connectデコレーターの「@」(アットマーク)って何?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み】 \u003C とは何ですか?
-
[解決済み】module.exports "モジュールが定義されていません"