[解決済み] Redux ツールキットの `useSelector` と `createSelector` をめぐる混乱
2022-03-09 07:53:54
質問
私はReduxとRedux toolkitの初心者です。私は次のことを学びました。
createSelector
は複数の入力セレクタを受け入れることができ、それらは個別の引数または配列として提供することができます。すべての入力セレクタからの結果は、出力セレクタへの個別の引数として提供されます。
const selectA = state => state.a;
const selectB = state => state.b;
const selectC = state => state.c;
const selectABC = createSelector(
[selectA, selectB, selectC],
(a, b, c) => {
// do something with a, b, and c, and return a result
return a + b + c;
}
);
質問ですが、もし私が1つの単純な状態にしか関心がないのであれば、単に
useSelector
このように
const selectA = state => state.a;
const a = useSelector(selectA)
この2つの使い分けは何ですか?
どのように解決するのですか?
セレクタとは、Reduxのステートツリーを引数として受け取り、抽出されたデータまたは派生したデータを返す関数のことです。 あなたが示したようなプレーンな関数も含まれます。
多くの場合、項目の配列にマッピングするなど、結果の計算をメモして、入力が変わらない限り再計算しないようにしたいものです。 Reselect の
createSelector
は、入力が変更された場合にのみ出力を再計算する、メモ化されたセレクタ関数を作成します。
詳しくは、私の投稿をご覧ください。 カプセル化とパフォーマンスのためのReselectセレクタの使用 と同様に 新しいチュートリアル「Redux Essentials」の「quot;パフォーマンスとデータの正規化」ページ。 .
関連
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] Next.jsでWebSocketを利用する
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] React の open mailto E-Mail クライアントの onClick で textarea から本文を取得する。
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] ReactJS で inst.render が関数でないエラーが発生する
-
[解決済み] Reduxのアクションをタイムアウトでディスパッチする方法とは?
-
[解決済み] ES6 ジェネレータで redux-saga を使用する利点/欠点と ES2017 async/await で redux-thunk を使用する利点/欠点
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] Webpack のコンパイルに失敗した
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] Static HTML elements with event handlers require a role." を修正するにはどうすればよいですか?
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。
-
[解決済み] 拡張子.tsと.tsxの違いは何ですか?どちらもreactのタイプスクリプトファイルの拡張子として使用されます。では、どこで使うべきなのでしょうか?