Optics

安装

要使用此功能，你必须安装 optics-ts 和 jotai-optics。

npm i optics-ts jotai-optics

focusAtom

focusAtom 创建一个新的原子，基于你传递给它的焦点。这将创建一个派生的原子，它将专注于原子的指定部分， 当派生原子更新时，派生者会收到更新通知，并在派生者上完成等效的更新。

看看这个：

const baseAtom = atom({ a: 5 }) // PrimitiveAtom<{a: number}>
const derivedAtom = focusAtom(baseAtom, (optic) => optic.prop('a')) // PrimitiveAtom<number>

所以基本上，我们从一个 PrimitiveAtom<{a: number}> 开始，它有一个 getter 和一个 setter，然后使用 focusAtom 来放大 baseAtom 的 a 属性， 并得到一个 PrimitiveAtom<number>。值得注意的是，这个 derivedAtom 不仅是一个 getter，它也是一个 setter。如果 derivedAtom 更新，那么在 baseAtom 上也会进行等效的更新。

下面的例子很简单，但它是一个起点。focusAtom 支持许多种类型的 optics，包括 Lens，Prism，Isomorphism。

要查看更高级的 optics，请参见以下示例：

optics-ts 中文文档：https://ouweiya.github.io/optics-ts-zh

示例

import { atom } from 'jotai'
import { focusAtom } from 'jotai-optics'

const objectAtom = atom({ a: 5, b: 10 })
const aAtom = focusAtom(objectAtom, (optic) => optic.prop('a'))
const bAtom = focusAtom(objectAtom, (optic) => optic.prop('b'))

const Controls = () => {
  const [a, setA] = useAtom(aAtom)
  const [b, setB] = useAtom(bAtom)
  return (
    <div>
      <span>Value of a: {a}</span>
      <span>Value of b: {b}</span>
      <button onClick={() => setA((oldA) => oldA + 1)}>Increment a</button>
      <button onClick={() => setB((oldB) => oldB + 1)}>Increment b</button>
    </div>
  )
}

Codesandbox