State okuma

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.

Örnek çözümü göster

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

Kendini test et

Hangi kullanım daha verimli?
- useCounter((s) => s.count)
- useCounter.all()
- useCounter()
- useCounter.read()
Cevabı göster

useCounter() — Seçici kullanımı yalnızca ilgili alan değişince render tetikler.
Okuma parçalarını eşle

useCounter

Store hook'u
(s) => s.count

Seçici
count

Seçilen değer
re-render

Değer değişince olur

Seçici işlevini yaz

const count = useCounter((s) => s.____);

Cevabı göster

const count = useCounter((s) => s.count);

Sıradaki ders: Action

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler