Allowlist/Blocklist for Zustand Persist

Zustand is a simple and easy to use state management library for React. Recently they added support for native persistence in. This snippet shows how to setup persistence in Zustand with an allowlist/blocklist.

Below you will find examples in both Javascript and Typescript, use the version that you need, both are not required.

Snippet

javascript

export function partializeState(state, keys) {
  return Object.fromEntries(
    Object.entries(state).filter(([key]) => {
      return keys.includes(key);
    })
  );
}

typescript

export function partializeState<Store>(state: Store, keys: (keyof Store)[]) {
  return Object.fromEntries(
    Object.entries(state).filter(([key]) => {
      return keys.includes(key as keyof Store);
    })
  );
}

Usage

javascript

import create from "zustand";
import { persist } from "zustand/middleware";
import { partializeState } from "./helpers";

export const useStore = create(
  persist(
    (set, get) => {
      // ...
    },
    {
      name: "name-of-your-store",
      partialize: partializeState,
    }
  )
);

typescript

import create from "zustand";
import { persist } from "zustand/middleware";
import { partializeState } from "./helpers";

export const useStore = create(
  persist<IStore>(
    (set, get) => {
      // ...
    },
    {
      name: "name-of-your-store",
      partialize: partializeState,
    }
  )
);