Redux persist のロードが遅い問題と解決方法

Next.js や React.js で Redux persistを使っていると時々、local storage のロード前に処理するのを防ぎたいことがある。

具体例

例えば、

• アカウントデータを永続保存している
• ユーザーと非ユーザー両方が同じAPIを叩くが、ユーザーの場合だけプライベートな結果を返したい

というような状況がある。

useEffect(()=>{
  const config = {
    headers: {
      'Content-Type': this.contentType,
      'account-id': account?.id,
    },
  };
  const { data } = await axios.get("/item", config)
}, [account]);

account を永続保存していた場合、この useEffect はlocal storage ロード前とロード後の2回走ることになる。

解決方法

Redux persist が rehydrated という値を用意してくれている。
ロードが完了したら rehydrated が true になる。

const getRehydrate = (state: State): boolean => {
  const isRehydrate = state._persist?.rehydrated;

  return isRehydrate;
};

rehydrated を利用すれば、ロード後にだけAPIをコールすることができる。

const isRehydrated = useSelector(getRehydrate);

useEffect(()=>{
  if (!isRehydrated) {
    return;
  }

  const config = {
    headers: {
      'Content-Type': this.contentType,
      'account-id': account?.id,
    },
  };
  const { data } = await axios.get("/item", config)
}, [account, isRehydrated]);