React ReduxからHooksAPIが利用できる（ver7.1）

はじめに

• Redux7.1からHooksのAPIがつかる https://react-redux.js.org/api/hooks

useDispatch

• Reduxストアからディスパッチ関数への参照を返します。必要に応じて、アクションをディスパッチするために使用できます。

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

useStore

• コンポーネントに渡されたものと同じReduxストアへの参照を返します。 このフックはおそらく頻繁に使用すべきではありません。主な選択肢としてuseSelector（）をお勧めします。ただし、これは、レデューサーの交換など、ストアへのアクセスを必要とするあまり一般的でないシナリオでは役立つ場合があります。

import React from 'react'
import { useStore } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const store = useStore()

  // EXAMPLE ONLY! Do not do this in a real app.
  // The component will not automatically update if the store state changes
  return <div>{store.getState()}</div>
}

useSelector

• インラインセレクターでuseSelectorを使用すると、コンポーネントがレンダリングされるたびにセレクターの新しいインスタンスが作成されます。これは、セレクターが状態を維持しない限り機能します。ただし、メモ化セレクター（たとえば、reselectからcreateSelectorを介して作成されたもの）には内部状態があるため、それらを使用するときは注意が必要です。以下に、セレクターをメモ化するための一般的な使用シナリオを示します

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

パフォーマンス

• デフォルトでは、useSelector（）は、アクションがディスパッチされた後にセレクター関数を実行するときに、選択された値の参照等価比較を行い、選択された値が変更された場合にのみコンポーネントを再レンダリングします。ただし、connect（）とは異なり、useSelector（）は、コンポーネントのプロップが変更されていなくても、親の再レンダリングが原因でコンポーネントが再レンダリングされるのを防ぎません。

総評

• 便利でよさそうですが、パフォーマンスは少し懸念があるようです