Zod with zustand

[karelnagel]

Would you be interested in adding a middleware that checks that the new state is a valid zod type? I just made a example for myself and thought that this might be useful for more people to avoid state corruption.

import z from "zod";
import { StoreApi } from "zustand";

type set<T extends {}> = (partial: T | Partial<T> | ((state: T) => T | Partial<T>), replace?: boolean | undefined) => void;
type get<T extends {}> = () => T;
type store<T extends {}> = StoreApi<T>;
type fn<T extends {}> = (set: set<T>, get: get<T>, store: store<T>) => T;

export function zustandZod<T extends {}>(fn: fn<T>, zod: z.ZodType<T>, callback: (e: z.ZodError) => void = () => {}): fn<T> {
  return (set, get, store) => {
    const newSet: typeof set = (p) => {
      if (!("partial" in zod) || !(zod.partial instanceof Function)) throw new Error("zod must be a partial schema");
      const parse = p instanceof Function ? p(store.getState()) : p;
      const res = zod.partial().safeParse(parse);
      if (!res.success) return callback(res.error);
      return set(res.data);
    };
    return fn(newSet, get, store);
  };
}

Example use case: shows error message if trying to create invalid state

import { toast } from "sonner";
import z from "zod";
import { create } from "zustand";
import { zustandZod } from "./zustand-zod";

const TestStore = z.object({
  test: z.number(),
  setTest: z.function().args(z.number()).returns(z.void()),
});

export const useTest = create(
  zustandZod(
    (set, get) => {
      return {
        test: 1,
        setTest: (test) => set({ test }),
      };
    },
    TestStore,
    (error) => error.errors.map((e) => toast.error(`Invalid input for "${e.path.join(">")}": ${e.message}`))
  )
);

Haven't tested this a lot, but let me know what you think.

[Dank-del]

Hey 👋. Can I use this for a react native app alongside persist middleware? Was looking for something like this

[LeonMueller-OneAndOnly]

i highly recommend to use a zod schema to verify the persisted values meet the expected runtime schema. Otherwise there can be a lot of impossible to reproduce bugs in your app (depending in the user's device state).

To make this easy to use (so i actually do it) i have written following helper util, feel free to use that:

https://gist.github.com/LeonMueller-OneAndOnly/3f8fe879b257716594bfa9d4562d3ece