Optics
安装
您必须安装 optics-ts
和 jotai-optics
才能使用此功能。
npm install optics-ts jotai-optics# oryarn add optics-ts jotai-optics
focusAtom
focusAtom
根据您传递给它的 focus 创建一个新原子。 这将创建一个派生原子,它将专注于原子的指定部分,当派生原子更新时,派生原子会收到更新通知,并在派生对象上进行等效更新。
看这里:
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,请参阅以下示例:https://github.com/akheron/optics-ts
示例
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>);};