atomWithToggle

atomWithToggle 创建一个新的 atom，其初始状态为布尔值，并带有一个切换它的 setter 函数。

这避免了必须设置另一个 atom 来更新第一个的状态的样板代码。

import { WritableAtom, atom } from 'jotai'

export function atomWithToggle(
  initialValue?: boolean,
): WritableAtom<boolean, [boolean?], void> {
  const anAtom = atom(initialValue, (get, set, nextValue?: boolean) => {
    const update = nextValue ?? !get(anAtom)
    set(anAtom, update)
  })

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

可以提供一个可选的初始状态作为第一个参数。

setter 函数可以有一个可选的参数，用于强制设定特定的状态，比如如果你想从中创建一个 setActive 函数。

下面是它的使用方法。

import { atomWithToggle } from 'XXX'

// 初始值将设置为 true
const isActiveAtom = atomWithToggle(true)

在一个组件中：

const Toggle = () => {
  const [isActive, toggle] = useAtom(isActiveAtom)

  return (
    <>
      <button onClick={() => toggle()}>
        isActive: {isActive ? 'yes' : 'no'}
      </button>
      <button onClick={() => toggle(true)}>force true</button>
      <button onClick={() => toggle(false)}>force false</button>
    </>
  )
}