Jotai

React 原始而灵活的状态管理

Immer

安装

要使用此功能，你必须安装 immer 和 jotai-immer。

npm i immer jotai-immer

atomWithImmer

atomWithImmer 创建一个新的 atom，类似于常规的 atom，但具有不同的 writeFunction。在这个包中，我们没有只读的 atoms，因为这些函数的目的是 immer produce(可变性)函数。 writeFunction 的签名是 (get, set, update: (draft: Draft<Value>) => void) => void。

import { useAtom } from 'jotai'
import { atomWithImmer } from 'jotai-immer'

const countAtom = atomWithImmer({ value: 0 })

const Counter = () => {
  const [count] = useAtom(countAtom)
  return <div>计数: {count.value}</div>
}

const Controls = () => {
  const [, setCount] = useAtom(countAtom)
  // setCount === update : (draft: Draft<Value>) => void
  const inc = () =>
    setCount((draft) => {
      ++draft.value
    })
  return <button onClick={inc}>+1</button>
}

示例

查看这个使用 atomWithImmer 的示例：

withImmer

withImmer 接收一个 atom 并返回一个派生的 atom，就像 atomWithImmer 一样，它有一个不同的 writeFunction。

import { useAtom, atom } from 'jotai'
import { withImmer } from 'jotai-immer'

const primitiveAtom = atom({ value: 0 })
const countAtom = withImmer(primitiveAtom)

const Counter = () => {
  const [count] = useAtom(countAtom)
  return <div>计数: {count.value}</div>
}

const Controls = () => {
  const [, setCount] = useAtom(countAtom)
  // setCount === update : (draft: Draft<Value>) => void
  const inc = () =>
    setCount((draft) => {
      ++draft.value
    })
  return <button onClick={inc}>+1</button>
}

示例

查看这个使用 withImmer 的示例：

useImmerAtom

这个 hook 接收一个 atom 并用新的类似 immer 的 writeFunction 替换 atom 的 writeFunction。

import { useAtom } from 'jotai'
import { useImmerAtom } from 'jotai-immer'

const primitiveAtom = atom({ value: 0 })

const Counter = () => {
  const [count] = useImmerAtom(primitiveAtom)
  return <div>计数: {count.value}</div>
}

const Controls = () => {
  const [, setCount] = useImmerAtom(primitiveAtom)
  // setCount === update : (draft: Draft<Value>) => void
  const inc = () =>
    setCount((draft) => {
      ++draft.value
    })
  return <button onClick={inc}>+1</button>
}

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

如果你只需要 useImmerAtom 的 setter 部分，可以使用 useSetImmerAtom。

示例

查看这个使用 useImmerAtom 的示例：

JotaiJotai

Immer

Jotai