react-redux の useStore を使うタイミング
#Redux の状態をコンポーネントから取るだけなら useSelector でよく、useStore は殆どの場合不要な API なのだが、次のようなシチュエーションで必要になった。 useCallback が再帰処理をしている
再帰の途中で store が更新されることがある
再帰の過程で常に最新の store の状態を取る必要がある
通常コンポーネント内の関数はレンダリング時点での値を参照するので、useSelector はその時点での最新の値を提供する。
しかし、たとえばポーリング処理を再帰で書いており、ポーリングをやめるべきかの判断が store 内のフラグによってなされるといったケースだと、store の最新状態が関数内から見えているとは限らなくなる。
code:typescript
const poll = useCallback(async function poll() {
...
if (store.getState().item.isPersisted) {
return true
} else {
await wait(500)
return poll()
}
...
}, [])
とはいえ、ポーリングの状態をそもそも store に入れるべきかは微妙だが。
自分がいちから作るなら useRef() で済ませてしまうだろう。最新の状態をレンダリングサイクルと独立して管理したいという意味で、isPersisted.current = true というあの ref 特有の書き方もピッタリはまっている。