Persist Middleware

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

[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