Meydan okuma: Zustand store
- React kursu
- İleri seviye
- Ders 54/56
- 6 dk
Bir sepet store'u yazıp iki bileşene bağlarsın.
Meydan okuma: Zustand store
Bu meydan okumada Zustand ile bir durum deposu yazacaksın. create fonksiyonu bir hook döndürür; bileşenler bu hook'u çağırıp ilgili dilime abone olur.
Bir sayaç deposu count ve increment taşır. set({ count: count + 1 }) ile güncellersin. Seçici (selector) ile yalnızca gereken dilim abone olunur.
Uygulama Zustand store yaz
useCounter store yaz. create içe aktar. create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) })) ile store tanımla ve dışa aktar.
Başlangıç kodu
// useCounter store'unu buraya yazÖrnek çözüm
import { create } from 'zustand';
const useCounter = create((set) => ({
count: 0,
increment: () => set((s) => ({ count: s.count + 1 })),
}));
export default useCounter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Zustand'da güncelleme nasıl yapılır?
- store.state = newState
- set fonksiyonu ile Doğru cevap
- dispatch ile
- useState ile
Açıklama: set fonksiyonu durumu günceller.
2 Boşluğu doldur: Zustand store oluştur
Soru
import { create } from 'zustand';
const useCounter = ____((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));
Cevap
import { create } from 'zustand';
const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));Açıklama: create ile Zustand store kurulur.