Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
React Hooksが登場し、redux-reactのuseSelector Hooksを利用することができます。useSelectorを利用するとmapStateToPropsとconnect関数をuseSelectorに置き換えることができるのでコードがすっきりします。connect関数ではpropsでstateの値を渡していましたがuseSelectorではpropsを利用しません。selectという単語がuseSelectorには含まれているとおりstoreに保存されているstateデータの中から必要なデータを選択して取り出すことができます。
CountコンポーネントのみでuseSelectorを設定します。
connectとuseSelectorの違い
connect
HOCです。コンポーネントを渡すと以下の作業をすべて行うラッパーコンポーネントを返します。
- storeへのサブスクライブ
- mapStateとmapDispatchの実行
- 結合されたpropsをそのコンポーネントに渡す。
常に、PureComponentやReact.memoと同じように動作しますが、connectはコンポーネントに渡す最終的に結合されたpropsが変更された場合のみに自分のコンポーネントをレンダリングする。
なので、connectを使っているコンポーネントは再レンダリングの影響をかなり小さい部分に止めることが可能。
useSelector
関数コンポーネントの内部で呼び出されるフック。なので、親コンポーネントがレンダリングをされる際に、useSelectorは子コンポーネントのレンダリングを止めることができない。
なので、重いコンポーネントの場合は、React.memoと併用することが必要になる。
https://qiita.com/rh_/items/f3ad6037c13b4c9f33e1
