JotaiJotai

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

Immer

安装

您必须安装 immer 和 jotai-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>;
};

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

例子

使用 useImmerAtom 检查此示例：

演示

FIXME: 更新这个演示

GitHubnpm