How properly initialize store with values from localStorage

[Bubuioc]

Hello,

I’m new to Zustand and trying to understand how the persist middleware works with localStorage.

From the documentation, I see that persist automatically stores state in localStorage (by default). However, I couldn’t find a clear explanation of how the store is initialized with existing values from localStorage.

Here is my current implementation:

import { createStore } from 'zustand';
import { persist } from 'zustand/middleware';

const authStore = createStore<AuthStore>()(
  persist(
    (set, get) => ({
      accessToken: get().accessToken ?? null,
      refreshToken: get().refreshToken ?? null,
      user: get().user ?? null,
    }),
    { name: AUTH_STORE_NAME },
  ),
);

The issue is that nothing appears in localStorage, and I’m not sure if I’m initializing the store correctly.
Any clarification or example would be appreciated.

[cookesan]

The initializer should return the default state. Do not read get() there to initialize the same fields, because hydration is handled by persist after the store is created.

For example:

const authStore = createStore<AuthStore>()(
  persist(
    (set) => ({
      accessToken: null,
      refreshToken: null,
      user: null,
      setTokens: ({ accessToken, refreshToken }) =>
        set({ accessToken, refreshToken }),
      setUser: (user) => set({ user }),
      logout: () =>
        set({ accessToken: null, refreshToken: null, user: null }),
    }),
    {
      name: AUTH_STORE_NAME,
      partialize: ({ accessToken, refreshToken, user }) => ({
        accessToken,
        refreshToken,
        user,
      }),
    },
  ),
)

persist will read AUTH_STORE_NAME from storage and merge the stored state into that initial state. Also, nothing has to appear in localStorage until the store is actually changed through set or setState.

If this runs in an SSR environment, remember that localStorage only exists in the browser. In that case, use the documented manual hydration path (skipHydration + rehydrate) or otherwise make sure the store is only hydrated on the client.