atomWithToggleAndStorage

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，并在 localStorage 中以 "isActive" 为键进行存储
const isActiveAtom = atomWithToggleAndStorage('isActive')

在组件中的使用也与 atomWithToggle 相同。