読者になる

かているんるん

2022-05-05

備忘録: TypescriptでのRecoilとLocalStorage接続

recoiljs.org

const localStorageEffect =
  <T>(key: string): AtomEffect<T> =>
  ({setSelf, onSet}) => {
    if (process.browser) {
      const savedValue = localStorage.getItem(key);
      if (savedValue !== null) {
        setSelf(JSON.parse(savedValue));
      }

      onSet((newValue, _, isReset) => {
        isReset
          ? localStorage.removeItem(key)
          : localStorage.setItem(key, JSON.stringify(newValue));
      });
    }
  };

使用例

export const DebugModeState = atom({
  key: 'DebugModeState',
  default: false,
  effects: [localStorageEffect<boolean>('debug_mode')],
});
TypeScript Recoil React

cateiru 2022-05-05 14:39

この記事をはてなブックマークに追加
Tweet
  • もっと読む
コメントを書く
« アクセスしたら気分が上がる404ページ 待ち合わせがスムーズになるWebアプリを作… »
プロフィール
id:cateiru id:cateiru はてなブログPro
読者です 読者をやめる 読者になる 読者になる
このブログについて
検索
リンク
  • はてなブログ
  • ブログをはじめる
  • 週刊はてなブログ
  • はてなブログPro
最新記事
  • アクセスしたら気分が上がる404ページ
  • 備忘録: TypescriptでのRecoilとLocalStorage接続
  • 待ち合わせがスムーズになるWebアプリを作った
  • 株式会社はてなに入社しました
  • 寝る前の30分でSambaで管理しているNASをVPNから接続できるようにする
月別アーカイブ

はてなブログをはじめよう!

cateiruさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?

はてなブログをはじめる(無料)
はてなブログとは
かているんるん かているんるん

Powered by Hatena Blog | ブログを報告する

引用をストックしました

引用するにはまずログインしてください

引用をストックできませんでした。再度お試しください

限定公開記事のため引用できません。

読者です 読者をやめる 読者になる 読者になる