Same store multiple times on same webpage -> Dynamic Store name?

[hohenp]

Hi all

thanks for that great library!
I am using zustand within development of webparts. These webparts can be placed multiple times within the same page.
When I place multiple it multiple times, the both webparts are sharing the same store, but I want them to user their own isolated store.

For the devtools middleware I have seen it is possible to give the name of the store. Can I use that name to dynamically set the store name?

Do you have an example how that could be accomplished?

Thanks alot
Pascal

[dai-shi]

I'm not exactly sure the use case, but if it's the same memory space it's shared. If you need isolated stores, you want to create multiple stores. zustand/context might help, if React Context works.

[hohenp]

wow, thanks for that fast answer. Yes I tried the zustand/context but honestly I did not get it to run.
Do you a small example where that is used? I am not clear where you place the
const { Provider, useStore } = createContext();
when you have multiple files.

Thanks Pascal

[dai-shi]

Does "createContext usage in real components" in readme help?
const { Provider, useStore } = createContext() can be used like normal React Context. After all, it's just a small wrapper around React Context.

[hohenp]

Actually not. I do not understand how it works when components and store and in separate files.
What has to be imported within the components, to have access to the store?
How can I build the Provider when I am using React.createElement.

An example with seperate files would be very helpful.
Thanks
Pascal

[dai-shi]

Do you mean you understand everything if it's a single file?
Would you separate the question for single file case and separate file case?

Here's the example I created just now from my best understanding from your description.
https://codesandbox.io/s/gracious-oskar-43zut?file=/src/context.js

[dungle-scrubs]

I know I'm late to the conversation, but I think I can provide a good example of a use-case similar to what the OP might have been talking about.

Imagine that you have an eCommerce store with a product grid and 12 product cards.

Each card has a small image carousel, with each image corresponding to a specific color of that product. Each card also has a dropdown to select that product's color.

Using Context, I would traditionally wrap each card in its own Provider, keeping the "current color state" synchronized between each card's carousel and dropdown. However, each card has a different state, although they use the same file.

This is what I'd like to achieve with zustand, if possible. I'd like to have a single store, used across multiple groups of components at the time time, using only one file, while each card's instance is stored in its own memory space.

Is this possible? Thanks

[dai-shi]

I think it's typical to just use one zustand store to hold all products, and maybe a component receives product id in props.

It's technically possible to use Zustand&Context, but it's not very straightforward.

[dungle-scrubs]

@dai-shi Thanks, yeah I've done this before with Context, but was just wondering if one file could be used multiple times simultaneously, but separately. But it doesn't seem to work that way. Context still makes the most sense in that case.

[nouman2075]

I have a similar usecase. I created a color picker and handle all states in one store. Now i want to use the same color picker in my single page. For example, i have two options in my page, one to change text color and other to change background. Each of them should have its own instance of that color picker. Any suggestion how i can have create separate instance of that store?

[dai-shi]

You can create two stores and pass a store to each component. But it's probably tricky. I guess many people use just one store for multiple color pickers, which is easier for "global" state.

[nouman2075]

2 color picker was just an example. Sorry i make a mistake with my words. in one page, i'm using color picker in multiple places. I'm not sure how to use one store for multiple color pickers. Somehow i was able to solve this issue but don't know if it violates any rules. I just have to pass the key to useColorStore. That color key to pass all other color components. Now i have to write this to get the value from store const colorMode = useColorStore(colorKey)((state) => state.colorMode);.

const createColorStore = create<ColorPickerState, [['zustand/immer', never], ['zustand/subscribeWithSelector', never]]>(
	immer(
		subscribeWithSelector((set, get) => ({
			// ...
		}))
	)
);

type ColorStore = ReturnType<typeof createColorStore>;

const stores: Record<ColorKeyType, ColorStore> = {};

const getStore = (key: ColorKeyType) => {
	let store = stores[key];
	if (!store) {
		store = stores[key] = createColorStore();
	}
	return store;
};

const useColorStore = (key: ColorKeyType) => {
	const ref = useRef(getStore(key));

	return ref.current;
};

export default useColorStore;

[dai-shi]

It doesn't violate rules, but usually, a react hooks shouldn't return a hook. So, createStore & useStore will help instead of create.
Another nit is changing key to useColorStore isn't reactive because of useRef.

So, it can be something like this:

import { createStore, useStore } from 'zustand';

const createColorStore = () => createStore(
  immer(
    subscribeWithSelector((set, get) => ({
      // ...
    }))
  )
);

const stores = {};

const getStore = (key) => {
  let store = stores[key];
  if (!store) {
    store = stores[key] = createColorStore();
  }
  return store;
};

const useColorStore = (key) => {
  return useStore(getStore(key));
};

export default useColorStore;

[whj768702]

Thanks very much. There is a little bit problem. createColorStore isn't a function, so it should be store = stores[key] = createColorStore;. am i right?

[whj768702]

Thanks very much. There is a little bit problem. createColorStore isn't a function, so it should be store = stores[key] = createColorStore;. am i right?↳

sorry, i made a mistake. if we have mutliple stores, it will be a refrence to the same store. i shouldn't change store = stores[key] = createColorStore();. i should change const createColorStore = ()=>createStore( immer( subscribeWithSelector((set, get) => ({ // ... })) ) );;

[dai-shi]

Yeah, nice catch.

[nouman2075]

I'm confused with createColorStore. If i'm not wrong you want to say createColorStore function should returns a store usingcreateStore instead of create. Right?

What will be the type of selector here?

const useColorStore = (key: ColorKeyType, selector: ??? ) => {
	return useStore(getStore(key), selector);
};

[dai-shi]

usingcreateStore instead of create. Right?

Yeah, the point is to use useStore in useColorStore. Otherwise, it technically violates the rules of hooks.

What will be the type of selector here?

const useColorStore = <T>(key: ColorKeyType, selector: (state: ColorPickerState) => T) => {
  return useStore(getStore(key), selector);
};

[nouman2075]

Thanks @dai-shi. One last thing, now if i want to listen for state changes using a useColorStore.subscribe or if i want to get state in non-reactive way, i cannot access those methods (subscribe, setState, ..) with useColorStore.

[dai-shi]

You can do getStore(key).subscribe(...) and can create a helper function.

[nouman2075]

This solve the current issue how to create an isolated store with/without using context. Thank you so much for your help.