reactjs - Zustand kullanarak Toggle nasıl yapılır

Zustand kullanarak aşağıdaki mağazayı oluşturdum:

import create from "zustand"

const useStore = create((set) => ({
  show: false,
  toggleShow: () => set((state) => ({ show: !state.show })),
}))

Bu değeri show değiştirmek için doğru yolun bu olduğunu varsaydım. Ancak, TypeScript memnun değil -- !state.show içindeki show ifadesinin altında kırmızı dalgalı bir çizgi var ve şu hata mesajını veriyor:

Property 'show' does not exist on type 'object'.ts(2339)
any

Bu hata mesajını neden aldığım hakkında bir fikrin var mı ve Zustand kullanarak bir geçiş (toggle) fonksiyonunu nasıl doğru bir şekilde ayarlayabilirim?

Teşekkürler.

Cevap #1

Typescript, belirtmeniz gereken durumun nasıl görüneceğini bilmez, bu yüzden durumun düz bir nesne olduğunu varsayar.

Bunu çözmek için, mağazanız için bir tür tanımlayabilirsiniz. Daha sonra, bu türü create işlevine generik olarak geçirebilirsiniz:

type MyStore = {
    show: boolean;
    toggleShow: () => void;
};

// note the "<MyStore>" next to create
const useStore = create<MyStore>((set) => ({
    show: false,
    toggleShow: () => set((state) => ({ show: !state.show})),
}))

Bu, TypeScript'in mağazanızda hangi özelliklerin olmasını bekleyeceğini fark etmesini sağlar. Artık !state.show kısmı için hata vermeyecek ve mağazayı kullandığınızda anlamlı otomatik tamamlamalar sunacaktır.

İlgili makaleler