zustand typescript 坚持如何输入商店

Question

我有这个简单的商店

interface CartState {
  cart: { [id: string]: CartDto };
  addItem: ({ id, image, name, price }: Omit<CartDto, "quantity">) => void;
  removeItem: (id: string) => void;
  reset: () => void;
}
export const useCart = create<CartState>((set, get) => ({
  cart: {},
  addItem: ({ id, image, name, price }) => {
    set(() => {
      const cart = get().cart;
      if (!cart[id]) {
        cart[id] = {
          id,
          image,
          name,
          price,
          quantity: 0
        };
      }

      cart[id].quantity += 1;

      return { cart };
    });
  },
  removeItem: (id) => {
    set(() => {
      const cart = get().cart;

      if (!cart[id]) {
        return { cart };
      }

      const newQuantity = cart[id].quantity - 1;
      if (newQuantity <= 0) {
        delete cart[id];
      } else {
        cart[id].quantity = newQuantity;
      }

      return { cart };
    });
  },
  reset: () => {
    set(() => {
      return { cart: {} };
    });
  }
}));

而且效果很好。问题是当我尝试添加 persist

export const useCart = create<CartState>(
  persist(
    (set, get) => ({
      cart: {},
      addItem: ({ id, image, name, price }) => {
        set(() => {
          const cart = get().cart;
          if (!cart[id]) {
            cart[id] = {
              id,
              image,
              name,
              price,
              quantity: 0
            };
          }

          cart[id].quantity += 1;

          return { cart };
        });
      },
      removeItem: (id) => {
        set(() => {
          const cart = get().cart;

          if (!cart[id]) {
            return { cart };
          }

          const newQuantity = cart[id].quantity - 1;
          if (newQuantity <= 0) {
            delete cart[id];
          } else {
            cart[id].quantity = newQuantity;
          }

          return { cart };
        });
      },
      reset: () => {
        set(() => {
          return { cart: {} };
        });
      }
    }),
    {
      name: "cart",
      getStorage: () => localStorage
    }
  )
);

我遇到了这个错误：

Argument of type '(set: SetState, get: GetState, api: StoreApiWithPersist<{ cart: {}; addItem: ({ id, image, name, price }: Omit<CartDto, "quantity">) => void; removeItem: (id: string) => void; reset: () => void; }>) => { ...; }' is not assignable to parameter of type 'StoreApi | StateCreator<CartState, SetState, GetState, StoreApi>'.
Type '(set: SetState, get: GetState, api: StoreApiWithPersist<{ cart: {}; addItem: ({ id, image, name, price }: Omit<CartDto, "quantity">) => void; removeItem: (id: string) => void; reset: () => void; }>) => { ...; }' is not assignable to type 'StateCreator<CartState, SetState, GetState, StoreApi>'.

我试过

export const useCart = create<StoreApiWithPersist<CartState>>

运气不好。

请问正确的方法是什么？

Answer 1

我遇到了同样的问题。我所做的是：

import create, { GetState, SetState } from 'zustand';
import { devtools, persist, StoreApiWithPersist } from 'zustand/middleware';

const useAssetStore = create<AssetStoreType, SetState<AssetStoreType>, GetState<AssetStoreType>, StoreApiWithPersist<AssetStoreType>>(
persist(
    devtools((set) => ({
        logo: '',
    })),
    { name: 'assetStore', version: 1, getStorage: () => localStorage }
));

因此，在您的情况下，您需要明确添加：

create<CartState, SetState<CartState>, GetState<CartState>, StoreApiWithPersist<CartState>>

zustand typescript 坚持如何输入商店

zustand typescript persist how to type store

reactjs

typescript

react-state