How to Use Zustand Stores in an Array?

[rthaut]

This might be an issue with the way I am trying to architect my stores, but I have a use case where I want to have an array of Zustand stores within another store.

Here's a CodeSandbox showing my implementation mostly working: https://codesandbox.io/s/using-zustand-stores-in-an-array-kwpmxc

The issue is in the Sleuth.tsx component, where I am trying to get a count of the bear stores where the bears' status property is a certain value.

In the demo, if you add a few bears, then either hibernate them individually or all at once, the "Sleeping Bears Count" never changes. The individual Bear.tsx components all update to show the "hibernating" status, but the bears array on the sleuthStore.ts doesn't seem to update.

I thought maybe it was just the hibernate() method in the sleuthStore.ts store, but since the issue also happens when using hibernate on an individual bear, I'm at a loss...

[dai-shi]

It's not very common to create an array of stores, but I don't think it's impossible. However, in that use case, I'd use createStore rather than create (which creates a hook) to avoid misusing custom hooks (violating The Rules of Hooks.)

[siisee11]

Hi, thank you for providing great example. Is there any solution you found?

[rthaut]

Unfortunately, not a good one.

I tried to use subscribe to have a function run on the bears array of the Sleuth store whenever one of the Bear stores updated, but that never fired.

I ended up using subscribe on each individual sub-store (instead of directly on the array of stores) and using a dispatch to update manually tracked counts. So in the public example I made, it would be something like:

1. Add subscribe() on each Bear store in the bears array of the Sleuth store
2. Invoke a custom dispatch() within that subscribe callback that goes to the Sleuth store
3. Update various countX properties on the Sleuth store that I could then use (in place of Sleuth.bears.filter())

If I have time I'll go back and add a fork on my original Sandbox showing this approach, but again it was far from ideal.

[siisee11]

Thanks for the explanation! I'm going to try your method in my project, and I'll let you know if I come up with any new approaches.

[Maxoos]

I'm looking to do something similar, I think this is where Zunstand is kinda not a suitable solution. I've managed to get this working easily with mobx which is more class oriented.

[carlbrn]

See #163 (comment)