I don't see updated values from the Zustand store when using custom storage

[ugurkellecioglu]

Hi! Here is how I define a Zustand store:

export const usePreferenceStore = create<PreferenceStore>()(
  persist(
    (set, get) => ({
      accountName: "",
      getAccountName: () => get().accountName,
      getAccountname2: async () => {
        return await storage.getItem("preference-storage")
      },
      setAccountName: (name) => set({ accountName: name }),
    }),
    {
      name: "preference-storage", // unique name
      storage: createJSONStorage(() => storage),
    }
  )
)

Where my custom storage is defined as:

export const storage: CustomStateStorage = {
  getItem: async (name: string): Promise<string | null> => {
    const res = await Browser.storage.sync.get(name)
    return res[name] || null
  },
  ...
  ...

I'm using this store in a Chrome extension, but the issue is not related to the context, I believe.

When accountName is updated:

These give me the old value:

const accName = usePreferenceStore.getState().accountName
const accountName = usePreferenceStore.getState().getAccountName()

Whereas, if I take a look at the following:

const preferenceStoreValue = usePreferenceStore.getState().getAccountName2()

I can see that accountName has the newest value.

---

I realized that getItem is only called once, in app initialization, but what I was expecting is that every time I use usePreferenceStore.getState().accountName, it should first call getItem() to fetch the store and then give the accountName from inside it.

---

[ugurkellecioglu]

For now I use following as a workaround, I get the newest value in this way but in that way I don't even get profits from using zustand. it just a vanilla js way to get datas from chrome storage.

getAccountName: async () => {
  const store = (await storage.getItem(persistOptions.name)) || "{}"
  const parsedStore = JSON.parse(store)
  return parsedStore?.state?.accountName
}

[ugurkellecioglu]

Really interesting. If I change my state through a UI element, like a button in my React app in the sidepanel of my chrome extension, I can see that the state changes accordingly and the UI get updated.

However, if I change my state in a background script, even though my store data changes, the UI in the side panel doesn’t update. (zustand don't know about change is happened?)

I assume you may not know much about Chrome extensions:

Background scripts are like the server-side of the browser extension, while the side panel is the front-end.

So, I guess if I modify the Zustand store in my background script, even though it changes the data in storage, the side panel’s Zustand store doesn’t know about this change, so it doesn’t get the latest data

[dbritto-dev]

@ugurkellecioglu if that's the case then that's expected there's no something like server store, everything should done on the client side