Zustand Storage isn't persisting [BUG]

Describe the bug

Storage doesn’t sync to server (liveblocks Dashboard) or any other connected clients.

To Reproduce

Steps to reproduce the behavior:

1. Run zustand-whiteboard example (I cloned on codesandbox)
2. Fire-up a few browser tabs.

Expected behavior

• Positions of rectangles are synced across browser tabs
• Positions data is visible in liveblocks dashboard

Illustrations

Screenshot of independent rectangle positions:

Screenshot of empty liveblocks dashboard:

Environment (please complete the following information):

Everything in your Examples

• @liveblocks/client@0.16.9
• https://github.com/liveblocks/liveblocks/blob/main/examples/zustand-whiteboard/package.json#L6-L7

Additional context

• I’m trying to pull state out into Zustand/Redux/jotai and getting no luck.
• The React-based examples seem to work fine.
• Same issue in your “Upgrade examples to 0.16.1” PR

[jamesbvaughan]

With this new version, the only place where you should add an annotation is at the create<T>()(…) call.

This was the key thing I think I was missing when I first attempted this upgrade yesterday. I had explicit annotations all over the place that (I think) were necessary with the complexity of our use of pre v0.4 zustand and pre v0.18 liveblocks, and now it seems to be working with just that one annotation like you said.

I’ll let you know if I run into any other issues!

[nvie]

Hi @jamesbvaughan, that’s great feedback!

“I’ve started looking in to this upgrade and my main initial feedback is that it would be really helpful to an example of how to use @liveblocks/zustand with the zustand slices pattern and more than one zustand middleware (for example, with subscribeWithSelector). Most sizable applications using zustand are likely to be using that pattern, and it makes implementation with types a lot more complicated.”

I’ll think about where to best document this, but that’s a great point. For now, we do have an internal test file that uses Zustand’s fishes-and-bears slice example, and you can use it as a reference to understand how you can define the slices, and how to annotate your create() call.

You can find the standard Zustand setup parts here and here. Nothing Liveblocks related so far. Also, I wrapped this example in a subscribeWithSelector.

The key type annotation to focus on from a Liveblocks perspective is now this line:

const useStore = create<WithLiveblocks<MyState>>()(
  //                                            ^^ Not a typo
  /* ... */
);

Key points:

1. Wrap your state type in a WithLiveblocks<...> helper, so the type of the liveblocks property will be known.
2. Make sure to include that extra empty “call” to create()(...). This is required by Zustand, not Liveblocks, to aid type inference.

Other than this, it should all work automatically. Please let us know if you’re running into issues with this.

I’m trying to test these upgrades out in our codebase right now, but it’s requiring frequent dives into both zustand and liveblocks’ source code in order to understand the types, and I still haven’t gotten it completely figured out.

With this new version, the only place where you should add an annotation is at the create<T>()(...) call. There, T should be of the form WithLiveblocks<YourState>. Once you do that, you should be able to remove all other explicit type annotations from your Zustand and Liveblocks related code. Again, please let us know if there’s anything we can help you with.