Zustand

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

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

这仅使用 zustand 的原生 api。

安装

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

示例