useSelector

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.

Örnek çözümü göster

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>;
}

Kendini test et

useSelector parçalarını eşle

useSelector

State okur
(state) => state.counter

Seçici işlev
state.counter

Sayaç değeri
re-render

State değişince olur

Seçici işlevi yaz

const count = useSelector((state) => state.____.value);

Cevabı göster

const count = useSelector((state) => state.counter.value);

İnce seçici neden tercih edilir?
- Gereksiz render'ları azaltır
- Stilleri değiştirir
- Animasyonu hızlandırır
- Token'ı siler
Cevabı göster

Token'ı siler — İnce seçici yalnızca ilgili alan değişince render tetikler.

Sıradaki ders: Özet - State yönetimi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler