Persist Middleware

[alexluong]

I'm working on a middleware that saves states into LocalStorage. I see that other people also had the same idea (#7).

I have an example working, but I'd love to learn if there is a better approach.

const isBrowser = typeof window !== "undefined"

const persistedState =
  isBrowser
    ? JSON.parse(localStorage.getItem("sidebarState"));
    : null

const persist = config => (set, get, api) =>
  config(
    args => {
      set(args);
      isBrowser && localStorage.setItem("sidebarState", JSON.stringify(get()));
    },
    get,
    api
  );

const [useSidebar] = create(
  persist(set => ({
    isOpen: persistedState ? persistedState.isOpen : true,
    toggleSidebar: () => {
      set(state => ({ ...state, isOpen: !state.isOpen }));
    },
  }))
);

[marcoacierno]

Mine was/is a very basic app, but that's what I implemented:

import create from 'zustand';

const restoredState = JSON.parse(localStorage.getItem('state'));

const persist = config => (set, get, api) =>
  config(
    args => {
      set(args);
      window.localStorage.setItem('state', JSON.stringify(get()));
    },
    get,
    api,
  );

const [useStore] = create(
  persist(set => ({
    theme: 'light',
    ...restoredState,
    setTheme: theme => set(state => ({ theme })),
  })),
);

export default useStore;

where I basically first set the default state of each variable and then overwrite them with what was inside the store.

It won't work well if you change type of information, or anything else really but gets the job done (at least for me)

[alexluong]

FWIW, my initial approach is terrible for SSR. It took me 6 hours to figure it out.

Apparently, this:

const isBrowser = typeof window !== "undefined"

const persistedState =
  isBrowser
    ? JSON.parse(localStorage.getItem("sidebarState"));
    : null

doesn't work well with SSR.

The approach I need to take is to give the original state inside create function the initial state, and then use useMount to get localStorage data and update state.

Just in case anyone may run into this in the future!

[drcmda]

is this something we can add officially to the lib? or is it too specific?

[marcoacierno]

What about this?

import create from 'zustand';

const persist = config => (set, get, api) => {
  const initialState = config(
    args => {
      set(args);
      window.localStorage.setItem('state', JSON.stringify(get()));
    },
    get,
    api,
  );

  const restoredState =
    typeof window === 'undefined'
      ? {}
      : JSON.parse(localStorage.getItem('state'));

  return {
    ...initialState,
    ...restoredState,
  };
};

const [useStore] = create(
  persist(set => ({
    theme: 'light',
    acceptedCookies: null,
    setTheme: theme => set(state => ({ theme })),
  })),
);

export default useStore;

should be SSR friendly and work?

[alexluong]

@drcmda I think this is too specific. I don't think there is a way for zustand to support it right out of the box. But maybe some documentation would be beneficial? Although this is not zustand-specific as it's a problem with other state managements too.

@marcoacierno I don't think that would work, although I haven't tested it yet. The problem is that even if the store state is updated with persisted data, the component will not rerender.

What I needed to do:

function Component() {
  const { state, setState } = useStore()

  React.useEffect(() => {
    if (typeof window !== "undefined") {
      setState(JSON.parse(localStorage.getItem("key")))
    }
  }, [setState])

  return <Stuff />
}

[ahmetcetin]

@drcmda having persistence as option would be great really. supporting it in ssr indeed would be too specific case, but persistence of a store is quite common problem really.

[rdhox]

On an electron app, I recently use this as a persist process.

const MainLayout : React.FunctionComponent = () => {

  const [ initialized, setInitialized ] = useState<boolean>(false);

  useEffect(() => {

    const initializedSettings: ReducerEffect = apiSettings.getState().reducers.initialize;
    const initializedThemes: ReducerEffect = apiThemes.getState().reducers.initialize;
    
    // Initialized the app with the persists states when the app is launched
    const unsubInitialData = myIpcRenderer.on('APP_INITIAL_STATE', data => {
      initializedSettings(data.initialSettings);
      initializedThemes(data.initialThemes);
      setInitialized(true);
    });

    // Each time the state that you want to persist is changed, the subscribe api trigger your persist function (like storing in AsyncStorage)
    const unsubSaveSettings = apiSettings.subscribe(
      (state: SettingsState) => {
        if (initialized)
          myIpcRenderer.send('APP_SAVE_SETTINGS', state);
      },
      settingsState => settingsState.state
    );
    const unsubSaveThemes = apiThemes.subscribe(
      (state: ThemesState) => {
        if (initialized)
          myIpcRenderer.send('APP_SAVE_THEMES', state);
      },
      themesState => themesState.state
    );

    return () => {
      unsubInitialData();
      unsubSaveSettings();
      unsubSaveThemes();
    }
  }, [initialized]);

  return (
    ...
  );
}

I used this structure for my zustand states:

{
  state: {...}, // state values
  reducers: {...}, // pure functions to change the state 
  effects: {...} // async functions with side effects
}

You can easily think of a web/mobile way with that example. It's not a middleware, but the subscribe api is perfect for this use.

[AnatoleLucet]

Edit:
Since v3.1.4 a build-in middleware has been added, see this section of the readme for more info.

---

I made a pretty basic one, but it does the job.

import create, { GetState, SetState, StateCreator, StoreApi } from "zustand";

type Product = { id: number; amount: number };

interface Store {
  products: Product[];
  setProducts: (payload: Product) => void;
}

const isRunningInBrowser = () => typeof window !== "undefined";

const persist = <T>(name: string, config: StateCreator<T>) => (
  set: SetState<T>,
  get: GetState<T>,
  api: StoreApi<T>,
): T => {
  const state = config(
    (payload) => {
      set(payload);

      if (isRunningInBrowser) {
        localStorage.setItem(name, JSON.stringify(payload));
      }
    },
    get,
    api,
  );

  return {
    ...state,
    ...(isRunningInBrowser() && JSON.parse(localStorage.getItem(name))),
  };
};

export const [useShoppingCart] = create<Store>(
  persist<Store>("shoppingCart", (set, get) => ({
    products: [],
    setProducts: (payload) => {
      const state = get();

      set({ ...state, products: [...state.products, payload] });
    },
  })),
);

The persist middleware will automatically rehydrate your state. No need to do anything specific in your state creator function 🎉

In my example everything is in one file, but you can (and I do) put the persist and isRunningInBrowser functions in a specific file, then import it whenever you need to use a persistent store.
And it's also Typescript friendly.

[maxwaiyaki]

@marcoacierno using your example and I still get a console error Text content did not match. Server: "1 count" Client: "3 count". Using Next.js

[roadmanfong]

I'm not familiar with SSR, not sure how to do it.

But I created a package https://www.npmjs.com/package/zustand-persist for react and react native
Contributions are welcome

[GaspardC]

@AnatoleLucet how would you implement your solution with AsyncStorage (react-native - which is async) ?

[AnatoleLucet]

Hey @GaspardC, sorry I forgot to respond 🙃
I can't see how this could be implemented with an async storage without making every function async (which would require you to get your store's data in a useEffect or something) or falling in a callback hell.

Though I think this might be doable with a custom hook. But I'm not sure how a wrapper hook could adapt to any kind of zustand store.
Maybe someone else will have an idea 🤷‍♂️

[lordvcs]

I get the error Text content did not match. Server: "1 count" Client: "3 count" when using persist along with Next.js.
@maxwaiyaki were you able to solve this?

[MariusVB]

This comment helped me solve it: #324 (comment)

[alvinlys]

This comment helped me solve it: #324 (comment)

do you mind to share what does it solved for you, because I had removed it due to same effects depsite without ssr it and just stick back to one in the documentation?

[MariusVB]

This comment helped me solve it: #324 (comment)

do you mind to share what does it solved for you, because I had removed it due to same effects depsite without ssr it and just stick back to one in the documentation?

I don't get the error Text content did not match. Server: "x count" Client: "y count" anymore, after wrapping in noSsr component.
What did you use from the documentation to solve it?

[kavehsaket]

Same issue with next 13.4.4.

[alvinlys]

This comment helped me solve it: #324 (comment)

do you mind to share what does it solved for you, because I had removed it due to same effects depsite without ssr it and just stick back to one in the documentation?

I don't get the error Text content did not match. Server: "x count" Client: "y count" anymore, after wrapping in noSsr component. What did you use from the documentation to solve it?

just this exactly same https://docs.pmnd.rs/zustand/recipes/recipes#persist-middleware