1. ホーム
  2. reactjs

[解決済み] 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;パフォーマンスとデータの正規化」ページ。 .