atomWithToggleAndStorage는 atomWithToggle과 비슷하지만, 상태가 변경될 때마다 주어진 스토리지에 상태를 저장하는 기능을 추가로 제공합니다. 이는 atomWithStorage를 사용하여 구현됩니다.

다음은 소스 코드입니다:

import { WritableAtom, atom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

export function atomWithToggleAndStorage(
  key: string,
  initialValue?: boolean,
  storage?: any,
): WritableAtom<boolean, [boolean?], void> {
  const anAtom = atomWithStorage(key, initialValue, storage)
  const derivedAtom = atom(
    (get) => get(anAtom),
    (get, set, nextValue?: boolean) => {
      const update = nextValue ?? !get(anAtom)
      void set(anAtom, update)
    },
  )

  return derivedAtom as WritableAtom<boolean, [boolean?], void>
}

그리고 이렇게 사용할 수 있습니다:

import { atomWithToggleAndStorage } from 'XXX'

// 초기값은 false로 설정되며, "isActive"라는 키로 localStorage에 저장됩니다.
const isActiveAtom = atomWithToggleAndStorage('isActive')

컴포넌트에서의 사용법은 atomWithToggle과 동일합니다.