UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Recoil】Recoil Syncとは

Recoil Recoil Sync

Recoil Syncというライブラリを知ったので調べた

Recoilについては以前調べた

uga-box.hatenablog.com

Recoil SyncはAtomというステートオブジェクトを外部のステートと同期させることができるライブラリ

recoiljs.org

例としてドキュメントにあるURLとAtomを同期させる方法を見てみる

URL Persistence

Atomをurlと同期させる

以下のようにCurrentUserというクエリパラメータがついたURLでリクエストが来たときに、アプリ内のCurrentUserの初期値を123にすることができる

https://test.com/myapp?CurrentUser=123

実装方法

まずはatomの宣言

const currentUserState = atom<number>({
  key: 'CurrentUser',
  default: 0,
  effects: [syncEffect({ refine: number() })],
});

次に、アプリケーションのルートで、<RecoilURLSyncJSON>をインクルードする

function MyApp() {
  return (
    <RecoilRoot>
      <RecoilURLSyncJSON location={{part: 'queryParams'}}>
        ...
      </RecoilURLSyncJSON>
    </RecoilRoot>
  )
}

これだけで、やりたいことが実現できる

ちなみに、アプリ側でCurrentUserの値を変更した場合は、URLのクエリパラメータも書き変わる

ただ、特定のルーターと合わせて使いたい場合は独自に実装するか、他のライブラリを導入する必要がある

例えば、Nextルーターと組み合わせて使いたい場合は以下を利用するとよさそう

www.npmjs.com