5

I'm making a map in a component and in this component I'm using Zustand to store the state of each component, the problem is that the store instance is the same for all items, how do I create a new instance for each item?

I've already tried to create a function to do this but it didn't work.

aludvigsen
  • 5,893
  • 3
  • 26
  • 37
Fred Maciel de Oliveira
  • 51
  • 1
  • 2
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Mar 30 '22 at 17:25

2 Answers2

1

UPDATE:

Zustand doing some updates on their documentation since ver.4 was released. This is in their documentation how to create multiple instance with Slice Pattern https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md#slices-pattern

OLD ANSWER:

You can create multiple stories by setup it with different name of store.

Source code: https://codesandbox.io/s/loving-breeze-jshevq

  1. In this example I have created two store (bears and cats) files Create two store files
  2. Initial zustand store for "bears" and "cats" Inital zustand store
  3. Implementation enter image description here

Result:
enter image description here

deta utama
  • 669
  • 5
  • 14
  • 1
    From the docs https://github.com/pmndrs/zustand/blob/main/docs/guides/flux-inspired-practice.md, they recommend create a single store and group them with the slice pattern, do you know why this is the best practice? – theveloptg Sep 01 '22 at 21:35
  • Yeah, I saw that they are doing a lot of updates in documentation for the Version 4 on August. This not the best practice from them but you still can use it. I have updated my answer, thank you – deta utama Sep 02 '22 at 22:35
  • 4
    This is not creating multiple instances from the same store, this is copying & pasting into two stores – Liam Schauerman Jan 25 '23 at 20:52
  • Slices are also not providing any solution here. slices refers to distinct elements within a single store, not multiple instances of the same store – Liam Schauerman Jan 25 '23 at 21:04
  • This is not the answer to the question. – BlabzX Feb 18 '23 at 20:56
  • @BlabzX yeah you can downvote it if this is not the right one :) – deta utama Feb 20 '23 at 01:39
  • @LiamSchauerman if you looking for creating multiple instances, check my oldest answer https://stackoverflow.com/questions/71679066/how-to-create-multiple-instances-of-a-zustand-store/72654447?noredirect=1#comment133202237_72654447:~:text=md%23slices%2Dpattern-,OLD%20ANSWER%3A,-You%20can%20create – deta utama Feb 20 '23 at 01:46
  • Quoting the author himself, "use as many stores as you feel comfortable with" https://www.reddit.com/r/reactjs/comments/ogdkhl/comment/h4ibw4q/ . BTW, having multiple slices doesn't mean you have multiple stores – Fahmi Mar 26 '23 at 11:50
1

You have to create the definition of your state separate from when you instantiate it.

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);
BlabzX
  • 105
  • 3
  • 10
  • I think this is the same as my old answer :) https://stackoverflow.com/questions/71679066/how-to-create-multiple-instances-of-a-zustand-store/72654447?noredirect=1#comment133202237_72654447:~:text=md%23slices%2Dpattern-,OLD%20ANSWER%3A,-You%20can%20create – deta utama Feb 20 '23 at 01:44
  • @detautama I don't believe so since this one has the SAME definition but DIFFERENT instances. Your example has DIFFERENT definitions (e.g. the variable cat in one and bear in another) – Moemars Mar 29 '23 at 21:17