⏱️
useEffectのsetInterval内からReduxのstateを参照するときのやり方
useEffect内でsetIntervalを使い定期実行をする場合、クロージャの関係で
Reduxのstate(下記のusers)が更新されても、繰り返し処理内でそれが反映されることはない
const Hoge: React.FC = () => {
// storeからstate取得
const { users } = useSelector(state => state.users)
useEffect(() => {
const intervalId = setInterval(() => {
// redux storeのデータを使って何かする処理
// usersの初期値でずっと繰り返される
doSomething(users)
}, 5000);
return function () {
clearInterval(intervalId);
};
}, []);
}
useRefを使えばいい、使い方は合ってるかわからないけど以下で常に最新のstateを取り出せるようになった
(store側とFC内で2重のstate管理みたいになってて微妙)
const Hoge: React.FC = () => {
// storeからstate取得
const { users } = useSelector(state => state.users)
// refの定義
const refUsers = useRef(users)
// redux stateが更新されたらrefも更新するようにする
useEffect(() => {
refUsers.current = users;
}, [users]);
useEffect(() => {
const intervalId = setInterval(() => {
// redux storeのデータを使って何かする処理
// refUsers.currentを参照させる
doSomething(refUsers.current)
}, 5000);
return function () {
clearInterval(intervalId);
};
}, []);
}
Discussion