Zustand and Typescript - persist function cannot be implemented

288 views Asked by At

I would like to use the persist function in the middleware 'Zustand' to retain the values after a refresh of the page. When I try the following code, Typescript gives me the error below. I do not know what I'm doing wrong

import { create } from "zustand";
import { persist } from "zustand/middleware";

type CoverImage = {
 isOpen: boolean;
 onOpen: () => void;
 onClose: () => void;
};

export const useCoverImage = create(
 persist<CoverImage>(
  (set) => ({
   isOpen: false,
   onClose() {
    set({ isOpen: false });
   },
   onOpen() {
    set({ isOpen: true });
   },
 }),
 { name: "coverImage" }
 )
);

No overload matches this call. Overload 1 of 3, '(initializer: StateCreator<CoverImage, [], [never, unknown][]>): UseBoundStore<StoreApi>', gave the following error. Argument of type 'StateCreator<CoverImage, [], [["zustand/persist", CoverImage]]>' is not assignable to parameter of type 'StateCreator<CoverImage, [], [never, unknown][]>'. Type 'StateCreator<CoverImage, [], [["zustand/persist", CoverImage]]>' is not assignable to type '{ $$storeMutators?: [never, unknown][] | undefined; }'. Types of property '$$storeMutators' are incompatible. Type '[["zustand/persist", CoverImage]] | undefined' is not assignable to type '[never, unknown][] | undefined'.

0

There are 0 answers