State okuma
- React Native kursu
- İleri seviye
- Ders 57/83
- 5 dk
Zustand store'dan state okumayı öğrenirsin.
State okuma
Bir Zustand store'undan state okumak için dönen hook'u çağırırsın. İki yaygın yöntem vardır: tüm store'u almak (const { count, increment } = useCounter()) veya yalnızca bir alanı seçmek (const count = useCounter((s) => s.count)).
İkinci yöntem performans açısından daha verimlidir. Çünkü yalnızca count değiştiğinde bileşen yeniden render edilir; increment referansı değişmese bile bu render'ı tetiklemez. Bu kalıp, Zustand'ın önerdiği seçici (selector) kullanımıdır ve gereksiz render'ları azaltır.
Seçici yazımı
Seçici, bir geri çağrıdır; (s) => s.count gibi. Bu geri çağrı, store state'ini alır ve istenen alanı döndürür. Bileşen yalnızca bu alan değiştiğinde render edilir. Birden fazla alan seçmek için useShallow gibi yardımcılarla nesne döndürebilirsin.
Örnek: const name = useUser((s) => s.name). Burada name, kullanıcının adını taşır. s.email veya s.id değişse bile name aynı kaldığı sürece render tetiklenmez. Bu ince seçim, büyük listelerde ve formlarda fark yaratır.
Uygulama Count değerini oku
CounterValue bileşenini tamamla. useCounter'ı ./useCounter'dan içe aktar. const count = useCounter((s) => s.count) ile değeri oku. <Text>{count}</Text> döndür.
Başlangıç kodu
import React from 'react';
import { Text } from 'react-native';
export function CounterValue() {
// count'u seçici ile oku ve Text içinde göster
return null;
}Örnek çözüm
import React from 'react';
import { Text } from 'react-native';
import { useCounter } from './useCounter';
export function CounterValue() {
const count = useCounter((s) => s.count);
return <Text>{count}</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi kullanım daha verimli?
- useCounter((s) => s.count)
- useCounter.all()
- useCounter() Doğru cevap
- useCounter.read()
Açıklama: Seçici kullanımı yalnızca ilgili alan değişince render tetikler.
2 Okuma parçalarını eşle
| Kavram | Anlamı |
|---|---|
useCounter |
Store hook'u |
(s) => s.count |
Seçici |
count |
Seçilen değer |
re-render |
Değer değişince olur |
3 Seçici işlevini yaz
const count = useCounter((s) => s.____);const count = useCounter((s) => s.count);Açıklama: count yazılır; store'daki alan adı budur.