zustand-x Persist doesn't work as expected

trafficstars

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));
  }
}));

Sep 16 '23 08:09 NorouziM

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

Sep 16 '23 11:09 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,
}

Sep 18 '23 23:09 danobot

Screenshot 2023-10-08 at 10 00 55 This is the result after reloading the page. Initially, we have the previous state stored in localStorage, but it is subsequently cleared. @danobot

Oct 08 '23 06:10 NorouziM

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.

Dec 04 '23 22:12 RAFA3L

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.