Immer
安装
您必须安装 immer
和 jotai-immer
才能使用此功能。
npm install immer jotai-immer# oryarn 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>) => voidconst 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>) => voidconst 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>) => voidconst inc = () => setCount((c) => (c = c + 1));return <button onClick={inc}>+1</button>;};
如果您不将 withImmer
和 atomWithImmer
与 useImmerAtom
一起使用会更好,因为它们提供了类似 immer 的 writeFunction
而我们不需要创建一个新的。
例子
使用 useImmerAtom 检查此示例:
演示
FIXME: 更新这个演示