[vike-react-zustand] How do I initialize store from localstorage?

[lizhongyue248]

This is my store.ts

import { create } from "vike-react-zustand"

export type ThemeType = "light" | "dark" | "system"
export type LanguageOption = "zh" | "en"

interface Store {
  theme: ThemeType
  language: LanguageOption
  setTheme: (theme: ThemeType) => void
  setLanguage: (language: LanguageOption) => void
}

export const useStore = create<Store>((set) => ({
  theme: "system",
  language: "zh",
  setTheme: (theme: ThemeType) =>
    set((state) => ({ ...state, theme })),
  setLanguage: (language: LanguageOption) =>
    set((state) => ({ ...state, language }))
}))

Every time I open the page, the theme uses the default value system instead of the last value, and I want to be able to store it in localstorage and read it every time. I tried in +onCreatePageContext.ts and it didn't work, the localstorage is undefined. I then copied all the code from https://github.com/vikejs/vike/tree/main/examples/react-full/renderer, hoping to try it in +onRenderClient.tsx, and found that I got an error straight away TypeError. Cannot read properties of undefined (reading '_vikeReactZustandStoresServer') What should I do?

[brillout]

Have you tried Zustand's localStorage middleware?

[lizhongyue248]

Have you tried Zustand's localStorage middleware?

Oh, thanks! It does the job. But it has an initialization process when F12 refreshes the page, as shown below, which is not user friendly.

[brillout]

That's an inherent issue since localStorage only exists on the client-side. If you don't want a flash then use a cookie instead.

[lizhongyue248]

That's an inherent issue since localStorage only exists on the client-side. If you don't want a flash then use a cookie instead.

Thanks! By the way, I'm not using server-side, but SSG, which means there is no cookie?