Controlling persistent storage updates with IndexedDB

[stopyransky]

Hello,

Thanks for all working on zustand - this is really amazing project which allowed me to get up and running with persisting storage via IndexedDB (IDB) in no time.

I have however one use case that I am wondering how to implement.

As I understand, in case when i do not use partialize option, my whole store is saved to IDB on every change.
In my store I keep state related to app as well as data loaded by user using file-upload, it can be quite big dataset stored as JSON.

I would like to save part store (data) to IDB only when user uploads file (ie. on certain 'action' in the store), so it does not change when other parts of state are updated.

What would be the best approach of accomplishing this?
When I update one variable in the store, does the whole store is being send to IDB or only the changed part?
How often state is being synced with IDB? Can i influence it?
How to make the store 'lazy' when syncing with IDB (trigger sync only on certain setter function for example, or on only on beforeunload event)?
Does it make sense to keep all state (incl. data) in one IDB? or better to create one IDB for store and another for uploaded data?

Looking forward to your hints and thoughts regarding above!

[AnatoleLucet]

Hey

What would be the best approach of accomplishing this?

I don't think that's doable with one single zustand store. There's currently no way to conditionally persist the data.

Though, you could definitely split your store into multiples.
If you still want the benefits of using one single hook to access your data, I guess you could do something a bit like the following (haven't tested):

const useMyInternalStore1 = create(...)
const useMyInternalStore2 = create(...)

const useMyStore = (selector) => {
  const store1 = useMyInternalStore1(selector);
  const store2 = useMyInternalStore2(selector);

  return {
    ...store1,
    ...store2,
  }
};

When I update one variable in the store, does the whole store is being send to IDB or only the changed part?

Currently, the middleware is persisting your data on every set() no matter what you're updating.

How often state is being synced with IDB? Can i influence it?

I guess you're speaking of hydration, a.k.a. retrieving the stored data and hydrating your zustand store with it.
If that's the case, hydration is made when the store is created. It can also be done programmatically by calling useStore.persist.rehydrate().

How to make the store 'lazy' when syncing with IDB (trigger sync only on certain setter function for example, or on only on beforeunload event)?

If I understand correctly, you would want to disable persistence on set() and only persist programmatically?
Unfortunately, I don't think this is currently doable. But it could be a nice feature, I'll think about it.

Does it make sense to keep all state (incl. data) in one IDB? or better to create one IDB for store and another for uploaded data?

That really depends on what you prefer. Zustand is meant to be flexible, so you can use it the way you want.
But, in your case (big chunks of data & conditional persistence), I think your best choice is to split in multiples stores.