ReduxにおけるセレクターとuseSelectorフック

前回のレッスンでは、storeに商品データを保存しました。 では、どうすればstoreからそのデータを取得できるでしょうか？

これを行うためには、セレクター関数を作成する必要があります。 この関数は、storeに保存されているステート値から特定の情報の断片を抽出する方法を知っており、 アプリケーションが大規模化した際に重複コードの記述を防ぎます。 この関数は入力としてstateを受け取り、出力として必要なステートのスライスを返します。 例えば以下のようになります：

jsxconst selectValue = state => state.some.value

この教科書の最初の方で、storeにはgetStateというメソッドがあると説明されていました。 ステート値を取得するためにこのメソッドを簡単に使用することもできたでしょう：

jsxconst value = selectValue(store.getState())

問題は、Reactコンポーネントが直接storeにアクセスできないことです。 なぜなら、storeをコンポーネントファイルにインポートすることは禁止されているからです。 しかし、React-ReduxのフックuseSelectorを使用してコンポーネント内でデータを取得する方法があります。 さらに、このフックを使えば、コンポーネントは常に最新のデータのみを受け取ることができます：

jsxconst count = useSelector(selectValue)