JotaiJotai

状態
Primitive and flexible state management for React

Immer

安装

您必须安装 immerjotai-immer 才能使用此功能。

npm install immer jotai-immer
# or
yarn add immer jotai-immer

atomWithImmer

atomWithImmer 创建一个类似于常规 atom [atom] 的新原子,但具有不同的 writeFunction。 在这个 bundle 中,我们没有只读原子,因为这些函数的重点是 immer produce(mutability) 函数。 writeFunction 的签名是(get, set, update: (draft: Draft<Value>) => void) => void

import { useAtom } from "jotai";
import { atomWithImmer } from "jotai-immer";
const countAtom = atomWithImmer(0);
const Counter = () => {
const [count] = useAtom(countAtom);
return <div>count: {count}</div>;
};
const Controls = () => {
const [, setCount] = useAtom(countAtom);
// setCount === update : (draft: Draft<Value>) => void
const inc = () => setCount((c) => (c = c + 1));
return <button onClick={inc}>+1</button>;
};

示例

用 atomWithImmer 检查这个例子:

withImmer

withImmer 接受一个原子并返回一个派生原子,与 atomWithImmer 一样,它有一个不同的 writeFunction

import { useAtom, atom } from "jotai";
import { withImmer } from "jotai-immer";
const primitiveAtom = atom(0);
const countAtom = withImmer(primitiveAtom);
const Counter = () => {
const [count] = useAtom(countAtom);
return <div>count: {count}</div>;
};
const Controls = () => {
const [, setCount] = useAtom(countAtom);
// setCount === update : (draft: Draft<Value>) => void
const inc = () => setCount((c) => (c = c + 1));
return <button onClick={inc}>+1</button>;
};

示例

用 withImmer 检查这个例子:

useImmerAtom

这个 hook 接受一个原子,并像以前的 helper 一样用新的类似 immer-like 的 writeFunction 替换原子的 writeFunction

import { useAtom } from "jotai";
import { useImmerAtom } from "jotai-immer";
const primitiveAtom = atom(0);
const Counter = () => {
const [count] = useImmerAtom(primitiveAtom);
return <div>count: {count}</div>;
};
const Controls = () => {
const [, setCount] = useImmerAtom(primitiveAtom);
// setCount === update : (draft: Draft<Value>) => void
const inc = () => setCount((c) => (c = c + 1));
return <button onClick={inc}>+1</button>;
};

如果您不将 withImmeratomWithImmeruseImmerAtom 一起使用会更好,因为它们提供了类似 immer 的 writeFunction 而我们不需要创建一个新的。

例子

使用 useImmerAtom 检查此示例:

演示

FIXME: 更新这个演示