如何创建 Zustand 商店的多个实例？

Question

我正在一个组件中制作地图，在这个组件中我使用 Zustand 来存储每个组件的状态，问题是所有项目的存储实例都是相同的，如何为每个项目创建一个新实例项目？

我已经尝试创建一个函数来执行此操作，但没有成功。

Answer 1

更新：

Zustand 自版本 4 发布以来对其文档进行了一些更新。这是在他们的文档中如何使用 Slice Pattern 创建多个实例 https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md#slices-pattern

旧答案：

您可以通过设置不同的商店名称来创建多个故事。

源代码：https://codesandbox.io/s/loving-breeze-jshevq

1. 在此示例中，我创建了两个商店（熊和猫）文件
2. 最初的“熊”和“猫”的 zustand 商店
3. 实施

结果：

Answer 2

您必须在实例化状态时单独创建状态定义。

interface MyState {
  bears: number;
  setBears: (value: number) => void;
  getBears: () => number;
  killBears: () => void;
}

const definition = (
  set: (
    partial:
      | MyState
      | Partial<MyState>
      | ((state: MyState) => MyState | Partial<MyState>),
    replace?: boolean | undefined
  ) => void,
  get: () => MyState
) => ({
  bears: 0,
  setBears: (value: number) => set({ bears: value }),
  getBears: () => get().bears,
  killBears: () => set({ bears: 0 }),
} as MyState);

export const useState1 = create<MyState>(definition);
export const useState2 = create<MyState>(definition);

Answer 3

对于不同的实例（这意味着相同的存储结构但独立工作），无需使用硬编码的存储实例化，您可以使用 Context + zustand。

1. 您需要一个商店创建者功能。

const createMyStore = () => create(...

2. 在上下文提供程序中，您可以使用该功能创建商店。

export function DefectsSourceProvider({
  children,
} : {children: ReactNode}) {
  const storeRef = useRef<MyStore>();
  storeRef.current = createMyStore();
  return <Provider value={storeRef.current}>
      {children}
    </Provider>

3. 在该提供者内部，您可以使用钩子来使用该商店。

export function useStoreInstance<T>(
  selector: (state: StateCreators) => T,
): T {
  const storeInstance = useContext(StoreInstanceContext);
  return useStoreWithEqualityFn(storeInstance, selector, shallow);
}

4. 在您的组件中，您可以使用

   useStoreInstance(state => state.bears)