JotaiJotai

状態
Primitive and flexible state management for React

Zustand

Jotai 的状态驻留在 React 中,但有时与 React 之外的世界交互会很好。

Zustand 提供了一个 store 接口,可用于保存一些值并与 Jotai 中的原子同步。

这仅使用 zustand 的原生 api。

安装

您必须安装 zustandjotai-zustand 才能使用此功能。

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

atomWithStore

atomWithStore 使用 zustand store 创建一个新原子。 它是双向绑定,您可以双向更改值。

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>
</>
);
};

示例