useReducer

useReducer ile karmaşık state yönetimini öğrenirsin.

useReducer nedir?

useReducer karmaşık state yönetimi için kullanılan bir hook'tur. useState'e benzer ama state'i bir reducer fonksiyonuyla günceller. const [state, dispatch] = useReducer(reducer, initialState) şeklinde çağrılır.

useReducer özellikle birbiriyle ilişkili birden çok state alanı veya karmaşık geçiş mantığı olduğunda yararlıdır. dispatch ile bir action gönderirsin; reducer bu action'a bakarak yeni state'i döner. Bu desen, state değişikliklerini merkezi bir yerde toplar; hata ayıklamayı ve testi kolaylaştırır. Redux benzeri bir yaklaşımın React hook'u haline gelmiş halidir.

Üç temel parça

useReducer üç temel parçayla çalışır. Birincisi reducer: bir fonksiyondur, mevcut state ve bir action alır, yeni state'i döner. İkincisi initial state: state'in başlangıç değeridir. Üçüncüsü dispatch: action gönderen fonksiyondur.

Tipik bir akış şöyledir: bileşen bir olay algıladığında dispatch({ type: "increment" }) çağrılır. React bu action'ı reducer'a geçirir; reducer yeni state'i hesaplar ve döner. Bileşen yeni state ile yeniden render edilir. Bu akış, state değişikliklerini tahmin edilebilir ve izlenebilir kılar.

Uygulama useReducer'ı çağır

Bir Counter bileşeni yaz. useReducer'ı reducer ve initialState ile çağır; sonuçtan state ve dispatch al. reducer ve initialState bileşen dışında tanımla. Bileşen <Text>Sayaç</Text> döndürsün.

Örnek çözümü göster

import { useReducer } from "react";
import { Text } from "react-native";

function reducer(state, action) {
  return state;
}

const initialState = 0;

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return <Text>Sayaç</Text>;
}

Kendini test et

useReducer hangi amaçla kullanılır?
```
const [state, dispatch] = useReducer(reducer, initialState);
```
- AsyncStorage için
- Bileşeni stillendirmek için
- Navigasyon için
- Karmaşık state yönetimi için
Cevabı göster

Karmaşık state yönetimi için — useReducer karmaşık state için kullanılır.

useReducer'ı çağır

const [state, dispatch] = ____(reducer, initialState);

Cevabı göster

const [state, dispatch] = useReducer(reducer, initialState);

Parçayı rolüne eşle

reducer

State'i hesaplar
initialState

Başlangıç değeri
dispatch

Action gönderir
action

Olayı tanımlar

Sıradaki ders: Reducer fonksiyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler