Zustand

Jotai的状态存在于React中，但有时候我们希望能与React之外的世界进行交互。

Zustand提供了一个存储接口，可以用来保存一些值，并与Jotai中的原子进行同步。

这只使用了zustand的原生api。

安装

你需要安装zustand和jotai-zustand才能使用此功能。

npm i zustand jotai-zustand

atomWithStore

atomWithStore使用zustand存储创建一个新的原子。 它是双向绑定的，你可以从两端改变值。

import { useAtom } from 'jotai'
import { atomWithStore } from 'jotai-zustand'
import create from 'zustand/vanilla'

const store = create(() => ({ count: 0 }))
const stateAtom = atomWithStore(store)
const Counter = () => {
  const [state, setState] = useAtom(stateAtom)

  return (
    <>
      count: {state.count}
      <button
        onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}
      >
        button
      </button>
    </>
  )
}

示例