useSelector
- React Native kursu
- İleri seviye
- Ders 53/83
- 5 dk
useSelector ile state okumayı öğrenirsin.
useSelector
useSelector, store'daki state'i okumak için kullanılan hook'tur. Bir seçici (selector) işlev alır: const count = useSelector((state) => state.counter). Bu işlev, store state'ini alır ve ilgili parçasını döndürür. State değiştiğinde bileşen yeniden render edilir.
Seçici işlevin döndürdüğü değer, bileşendeki değişken olur. Sadece gerekli alanı seçmek performans açısından önemlidir: (state) => state.counter.value yerine tüm state.counter'ı döndürmek, daha geniş bir yeniden render tetikler. İnce seçici yazmak, gereksiz render'ları azaltır.
Seçici yazımı
Seçici işlev, okumak istediğin alanı döndürür. state.counter sayaç slice'ının tamamıdır; state.counter.value ise yalnızca değeri verir. İkincisi daha verimlidir; çünkü yalnızca değer değiştiğinde render tetiklenir. İlk kullanımda slice'ın başka bir alanı değişse bile render olur.
Bileşende const count = useSelector((state) => state.counter.value) yazıp count'u <Text>{count}</Text> içinde gösterirsin. State her değiştiğinde useSelector yeni değeri döner; bileşen güncellenir. Bu kalıp tüm Redux okumalarında tekrar eder.
Uygulama CounterValue yaz
CounterValue bileşenini tamamla. useSelector'u react-redux'tan içe aktar. const count = useSelector((state) => state.counter.value) 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 useSelector ile oku ve Text içinde göster
return null;
}Örnek çözüm
import React from 'react';
import { Text } from 'react-native';
import { useSelector } from 'react-redux';
export function CounterValue() {
const count = useSelector((state) => state.counter.value);
return <Text>{count}</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useSelector parçalarını eşle
| Kavram | Anlamı |
|---|---|
useSelector |
State okur |
(state) => state.counter |
Seçici işlev |
state.counter |
Sayaç değeri |
re-render |
State değişince olur |
2 Seçici işlevi yaz
const count = useSelector((state) => state.____.value);const count = useSelector((state) => state.counter.value);Açıklama: counter yazılır; slice adıyla state'in parçasına erişilir.
3 İnce seçici neden tercih edilir?
- Gereksiz render'ları azaltır
- Stilleri değiştirir
- Animasyonu hızlandırır
- Token'ı siler Doğru cevap
Açıklama: İnce seçici yalnızca ilgili alan değişince render tetikler.