Recoilで動的に初期stateを与える方法

やりたいこと

みんな大好きstate管理の雄、Recoil。
ユニットテストをするときや初期状態をどこかのオラクルから与えたい場合の書き方が公式docを見てもわかりづらかったのでメモ

こうする

RecoilRootのinitializeStateとして、初期値をsetしてあげる。

state.js

import { atom, selector } from "recoil"

export const hogeState = atom({
  key: "hogeState",
  default: true,
})

App.js

import { RecoilRoot } from "recoil"
import { hogeState } from "./state"

const initializeState = ({ set }) => {
  // 必要に応じて対象のステート及び値を設定するロジックを追加
  set(hogeState, false)
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot initializeState={initializeState}>
      <Component {...pageProps} />
    </RecoilRoot>
  )
}

export default MyApp

かんたんですね。

Recoil、とてもdeveloperフレンドリーなライブラリで好きです。

参考