Optics

安装

您必须安装 optics-ts 和 jotai-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 放大 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>
  );
};

Codesandbox