Adhere All Zustand State To a Localized Scope

[Jonathynlee]

Right now I am using Zustand to keep track of all of my state in a react-three-fiber application. In the application I rollup specific components into useable modular 3D components (and web components). As designed by Zustand (I think), when components are used that share the same state, the state gets updated in both places. I want to prevent this from happening and would like each component to keep track of its own state only. Is it possible to localize the state of each individual component?

I did quite bit of search for a solution on this and was not able to find a concrete answer that fits my use case.

How it works today:

How I would like it to work:

If there was a way to do this with rollup, I think that would be an even better method. Thanks ahead of time!

[dai-shi]

Not sure if I get the point, but does React Context help?

[Jonathynlee]

@dbritto-dev this sounds promising. I have never heard of a closure. Do you have a link to some documentation on it? Did a quick google search and nothing came up about it immediately.

[Jonathynlee]

@dbritto-dev in my real scenario my components have many children in which my different states affect those children differently. I also have many different contexts that already exist. In the solution you have. In order to do what you you suggested would I either need to props pass or use react context provider?

In my real scenario, I would like it to work similarly to how React three fiber does works. You can create a canvas which has its own set of state that it manages itself, even though is has many children. I did see mention of useBoundsState but wasn't sure if I was digging in the right rabbit hole.

Any thougths?

[dbritto-dev]

@Jonathynlee yes, you can combine that with useContext + Context API

[dbritto-dev]

@Jonathynlee here you go -> https://codesandbox.io/p/sandbox/gifted-dan-m2f8zj?file=%2Fsrc%2FApp.tsx%3A29%2C32

[Jonathynlee]

Ill try it with my code base and see if I can get it working. Thank you!

[Jonathynlee]

@dbritto-dev I had to set up a series of wrappers to achieve the desire output.

It would be incredible in the future if there was a way to set a zustand container where all state used within would be bound to just that context. Also, because it is a waterfall, states only have access to the zustand states above them. I will need to combine the states at some point, somehow.

[dbritto-dev]

@Jonathynlee what you mean? do you have any example?

[Jonathynlee]

@dbritto-dev
I have several stores that exist in my code. 13 to be exact. With the methodology provided, I will be stacking those stores to provide all stores needed.

Using the image below, it can be assumed that:
Store A will no have access to any other store
Store B will only have access to Store A

[oliveryasuna]

@dbritto-dev The CodeSandbox gives 404.

[dbritto-dev]

@oliveryasuna yeah, we are moving away from codesandbox to stackblitz but we lost some demos

[dbritto-dev]

so far I created this collection -> https://stackblitz.com/@dbritto-dev/collections/zustand