useReducer
- React Native kursu
- Orta seviye
- Ders 24/116
- 5 dk
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.
Başlangıç kodu
// useReducer'ı içe aktar
// reducer fonksiyonunu tanımla; state ve action alır
// initialState'i 0 olarak tanımla
function Counter() {
// useReducer'ı reducer ve initialState ile çağır
return <Text>Sayaç</Text>;
}Örnek çözüm
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>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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 Doğru cevap
Açıklama: useReducer karmaşık state için kullanılır.
2 useReducer'ı çağır
const [state, dispatch] = ____(reducer, initialState);const [state, dispatch] = useReducer(reducer, initialState);Açıklama: useReducer reducer ve initialState alır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
reducer |
State'i hesaplar |
initialState |
Başlangıç değeri |
dispatch |
Action gönderir |
action |
Olayı tanımlar |