Zustand nedir?
- React kursu
- İleri seviye
- Ders 25/56
- 4 dk
Zustand'ın basit bir state kütüphanesi olduğunu öğrenirsin.
Zustand nedir?
Zustand, küçük ve hızlı bir state kütüphanesidir. Redux'in provider, action ve reducer iskeletine ihtiyaç duymaz; tek bir create çağrısı ile store yazarsın.
Bir Zustand store'u bir hook olarak dışa aktarılır; bileşenler bu hook'u çağırıp state'i okur. Bu, boilerplate'i ciddi şekilde azaltır.
Zustand, herhangi bir provider gerektirmez; store modül seviyesinde yaşar ve tüm bileşenler tarafından paylaşılır.
create ile store
create fonksiyonu bir setup fonksiyonu alır; bu fonksiyon set ve get parametreleri ile state'i tanımlar. Dışa aktarılan hook, bu state'i okur ve değiştirir.
Örnek: export const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));
Bileşenlerde const count = useCounter((s) => s.count) ile yalnızca count'u okursun; bu, gereksiz çizimleri önler.
Uygulama useCounter store yaz
Aşağıdaki iskeleti tamamla. create ile useCounter store'u tanımla. State: { count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }. export const useCounter = create(...) ile dışa aktar.
Başlangıç kodu
import { create } from 'zustand';
// useCounter store'unu buraya yazÖrnek çözüm
import { create } from 'zustand';
export const useCounter = create((set) => ({
count: 0,
increment: () => set((s) => ({ count: s.count + 1 })),
}));Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Zustand neyi gerektirmez?
The store lives at module scope.- Provider Doğru cevap
- JavaScript
- React
- HTML
Açıklama: Zustand provider gerektirmez.
2 create importu
import ____ from 'zustand';import create from 'zustand';Açıklama: create zustand'dan içe aktarılır.
3 Zustand nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
create |
Store kurar |
set |
State günceller |
get |
State okur |
useStore |
Hook döner |