reactjs 如何创建Zustand存储的多个示例?

wbrvyc0a  于 2023-02-22  发布在  React
关注(0)|答案(2)|浏览(360)

我在一个组件中创建了一个Map,在这个组件中,我使用Zustand来存储每个组件的状态,问题是存储示例对于所有项目都是相同的,我如何为每个项目创建一个新示例?
我已经尝试过创建一个函数来实现这个功能,但是没有成功。

2sbarzqh

2sbarzqh1#

更新:

自从ver.4发布以来,Zustand在他们的文档上做了一些更新。这是在他们的文档中如何用Slice Patternhttps://www.example.com创建多个示例github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md#slices-pattern

旧答案:

您可以创建多个故事设置它与不同的名称的商店。
源代码:https://codesandbox.io/s/loving-breeze-jshevq
1.在本例中,我创建了两个存储(bears和cats)文件

1."熊"和"猫"的初始zustand存储

1.实现

结果:

6qfn3psc

6qfn3psc2#

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

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

相关问题