Persist doesn't work as expected

[NorouziM]

Description

Hello, I've enabled the "persist" option, which stores data in local storage. However, when I refresh the page, the data is replaced with the initial state, effectively removing the stored data. The documentation lacks a clear example of how this feature should work. Simply setting the data to local storage without retrieving it during hydration (page reload) doesn't achieve the intended purpose of persisting.

My code:

const invoiceSlice = createStore("invoice")(
  {
    cardPaymentImagesUploadedPaths: [] as Array<string>,
    form: {
      data: {
        user_name: "",
        user_phone: ""
      },
      isValid: true
    }
  },
  {
    persist: {
      enabled: true
    }
  }
).extendActions((set, get) => ({
  removeCardPaymentImagePath: (index: number) => {
    const urls = get.cardPaymentImagesUploadedPaths();
    set.cardPaymentImagesUploadedPaths(urls.filter((_, i) => i !== index));
  }
}));

[danobot]

I'm having issues getting it to work as well. see https://github.com/udecode/zustood/discussions/63

[danobot]

@NorouziM Can you try adding a logging middleware to understand if the store is rehydrated? I added an example below. This helped me eliminate zustood/zustand as a root cause.

export const zustandLogMiddlewareFactory = name => (config) => (set, get, api) =>
  config(
    (...args) => {
      console.log(name + ' Zustand current state', get());

      set(...args)
      console.log(name + ' Zustand new state',  get())
    },
    get,
    API
  );

Add it to Zustood options:

const myZustoodOptions = {
  middlewares: [zustandLogMiddlewareFactory('myStore')],
  persist: myPersistOptions,
}

[NorouziM]

This is the result after reloading the page. Initially, we have the previous state stored in localStorage, but it is subsequently cleared. @danobot

[RAFA3L]

On my first attempt the store was reinitialized too, but I notice it was a useEffect with the initial data. Removing the useEffect now it works fine.

[alan-chen-la-478]

I'm having the same issue and couldn't figure out a way to make it work.

store.js

    const name = 'app';
    const store = createStore(name, {
        persist: {
            enabled: true,
            name: `__presist_store__${name}`,
            storage: createJSONStorage(() => AsyncStorage),
        },
    })({
        access_token: null
    );

app.js

const App = () => {
    const accessToken = store.use.access_token();

    const loadToken = async() => {
        // some api stuff
        store.set.access_token(response.token);
    }

    return (
        <>
            <Text>{accessToken}</Text>
            <Pressable onPress={loadToken}><Text>Load token</Text></Pressable>
        </>
    );
}

My access token is always null when app is relaunch or reload via dev tool. How an I make the data persist? It used to work when using zustood "@udecode/zustood": "^1.1.3". Yes, I'm using react-navigation in my app. Can any show me a working setup? thanks.

[elijaholmos]

My app crashes when trying to use the persist middleware. Here's the error I get and the implementation I have:

This issue has been open for a while without any attention from the maintainer. @zbeyens, can we please get some support with this?

[joeyfigaro]

@zbeyens are you accepting contributions for this? no working rehydration means we can't use this lib.

[zbeyens]

Sure, I'd merge it asap