JotaiJotai

状態
原始和灵活的 React 状态管理

Optics

安装

您必须安装 optics-tsjotai-optics 才能使用此功能。

npm install optics-ts jotai-optics
# or
yarn 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 放大 baseAtoma 属性,得到 一个 PrimitiveAtom<number>。 这里值得注意的是,这个 derivedAtom 不仅是一个 getter,它还是一个 setter。 如果更新了 derivedAtom,则对 baseAtom 进行等效更新。

下面的示例很简单,但它只是一个起点。 focusAtom 支持多种 Optics,包括LensPrismIsomorphism

要查看更高级的 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>
);
};

Codesandbox