Wait for rehydration of multiple stores

[jbrodriguez]

Hi, I'm very new to zustand and my understaing is that it promotes using multiple stores vs something like redux that uses only one.

My question is can you share a code sample on how to guard the app from rendering before all stores are rehydrated, when using the persist middleware.

persist offers an onRehydrateStorage prop, but this would only be needed on the first useStore call

const store = set => ({
  isAuthenthicated: false,
  authenticate: ....
})

const options = {
  name: 'auth-storage',
  getStorage: () => AsyncStorage,
  onRehydrateStorage: () => <onRehydrated>
}

const useStore = create(persist(store, options))

onRehydrated in the above call needs to be an unique function that sets hydration for this particula store in the consuming component, the same for any other store being used.

So I need to send this function down to create the store, but only on first use, at the root component perhaps which holds state to determine whether the stores are hydrated or not.

But in other parts of the code I will not need to check for rehydration.

I hope this makes sense

[jbrodriguez]

I think I have answered my own question

I have a rehydrated prop in the store and a setRehydrated function.

In the persist config I whitelist all properties needed except for the rehydrated prop.

In the components that consume the stores, I guard the rendering by checking the rehydrated prop of all the stores.

it works :)

[willcray]

Could you post your code for this setup?

[willcray]

Trying to develop a similar setup as the above, but I'm unable to access and modify state in a onRehydrate function. How can I modify the state? Using the useStore requires being in a component.

const onRehydrated = () => {
    // How can I access and set state here?
}

const persistOptions = {
    name: 'persistent-storage',
    getStorage: () => AsyncStorage,
    onRehydrateStorage: () => onRehydrated(),
}

const useStore = create(persist((set: any, get: any) => ({
    ...store(set, get),
    ...createPersistentStore(set, get),
}),
    persistOptions
))

[AnatoleLucet]

You can do something like the following.

const onRehydrated = () => {
    const state = useStore.getState()
}

See https://github.com/pmndrs/zustand#readingwriting-state-and-reacting-to-changes-outside-of-components

[jbrodriguez]

My onRehydrateStorage is

      onRehydrateStorage: () => (state, error) => {
        if (state) {
          // state.setHydrated()
          state.hydrated = true
        }
      },

[willcray]

I tried both methods supplied above. I still cannot access the state effectively. I'm receiving "TypeError: undefined is not an object (evaluating 'useStore.getState')":

const persistOptions = {
    name: 'persistent-storage',
    getStorage: () => AsyncStorage,
    onRehydrateStorage: () => onRehydrated(),
}

const useStore = create(persist((set: any, get: any) => ({
    ...store(set, get),
    ...createPersistentStore(set, get),
}),
    persistOptions
))

function onRehydrated ()  {
    const store = useStore.getState()
    if (store) store.rehydrated = true
}

I've also tried:

function onRehydrated ()  {
    useStore.setState( {rehydrated: true} )
}

But useStore is returning an undefined object.

[AnatoleLucet]

The following might help you: #346 (comment)