Özet - Zustand
- React kursu
- İleri seviye
- Ders 28/56
- 5 dk
Bir tema store'u yazıp iki bileşene bağlarsın.
Özet - Zustand
Bu grupta Zustand'ın ne olduğunu, create ile store yazmayı ve shallow ile gereksiz çizimleri önlemeyi öğrendin. Şimdi bunları birleştirme zamanı.
Tipik akış: create ile bir tema store'u yazarsın; bileşenler selector ile tema okur; toggle ile tema değiştirir. Provider gerekmez.
Bir sonraki adımda tam bir tema akışı yazacaksın.
Uygulama Tema değiştirici bileşen
Aşağıdaki iskeleti tamamla. ThemeToggle bileşeni yaz. useTheme'i (s) => s.theme selectorü ile çağır (theme al). useTheme'i (s) => s.toggle selectorü ile çağır (toggle al). <button onClick={toggle}>{theme}</button> döndür. export default ekle.
Başlangıç kodu
import { useTheme } from './useTheme';
// ThemeToggle bileşenini buraya yazÖrnek çözüm
import { useTheme } from './useTheme';
function ThemeToggle() {
const theme = useTheme((s) => s.theme);
const toggle = useTheme((s) => s.toggle);
return <button onClick={toggle}>{theme}</button>;
}
export default ThemeToggle;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu grupta işlenmeyen konu?
Three topics were covered; Provider was not.- create ile store
- Selector kullanımı
- shallow karşılaştırma
- Redux Provider Doğru cevap
Açıklama: Redux Provider bu grupta işlenmedi.
2 toggle çağrısı
const toggle = use____((s) => s.toggle);const toggle = useTheme((s) => s.toggle);Açıklama: useTheme, store hook'unu döner.