Özet - useReducer
- React Native kursu
- Orta seviye
- Ders 29/116
- 5 dk
reducer, dispatch ve initial state'i birleştirerek bir alışveriş sepeti yazarsın.
Özet - useReducer
Bu grupta useReducer'ı öğrendin. reducer state'i hesaplayan saf fonksiyondur, dispatch action gönderir, initial state başlangıç değeridir. Bunları birleştirerek karmaşık state'i yönetirsin.
Şimdi bir alışveriş sepeti yazacaksın: reducer, sepete ürün ekleme action'ını işler; dispatch butondan çağrılır. Bu, gerçek dünyada useReducer'ın en sık kullanıldığı senaryolardan biridir. Önce reducer'ı, sonra bileşeni yazacaksın; sonunda çalışan bir sepet ortaya çıkacak.
Uygulama Sepet reducer'ı yaz
Bir cartReducer fonksiyonu yaz. state bir dizi olsun (ürünler). switch (action.type) ile "add" case'inde [...state, action.payload] döndür. default dalında state döndür.
Başlangıç kodu
// cartReducer fonksiyonunu yaz
// state bir dizi; action bir nesne
// switch ile add ve default dallarını yazÖrnek çözüm
function cartReducer(state, action) {
switch (action.type) {
case "add":
return [...state, action.payload];
default:
return state;
}
}Uygulama Sepet bileşeni yaz
Bir Cart bileşeni yaz. useReducer'ı cartReducer ve [] initial state ile çağır. Bir butona basıldığında dispatch({ type: "add", payload: "Elma" }) çağrılsın. Bileşen <Text>{state.length}</Text> döndürsün.
Başlangıç kodu
// useReducer'ı içe aktar
// cartReducer fonksiyonunu tanımla (state bir dizi)
// add case'inde [...state, action.payload] döndür
function Cart() {
// useReducer'ı cartReducer ve boş dizi ile çağır
// Butona basınca ürün ekleme action'ı gönder
return <Text>Sepet</Text>;
}Örnek çözüm
import { useReducer } from "react";
import { Button, Text } from "react-native";
function cartReducer(state, action) {
switch (action.type) {
case "add":
return [...state, action.payload];
default:
return state;
}
}
function Cart() {
const [state, dispatch] = useReducer(cartReducer, []);
return (
<>
<Button onPress={() => dispatch({ type: "add", payload: "Elma" })} title="Ekle" />
<Text>{state.length}</Text>
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useReducer hangi durumda uygundur?
const [state, dispatch] = useReducer(reducer, initialState);- Karmaşık state geçişlerinde Doğru cevap
- Stil verisinde
- AsyncStorage'da
- Navigasyonda
Açıklama: useReducer karmaşık state geçişleri için uygundur.
2 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
reducer |
State'i hesaplar |
dispatch |
Action gönderir |
initialState |
Başlangıç değeri |
action.payload |
Ek veri |
3 useReducer'ı çağır
const [state, dispatch] = ____(cartReducer, []);const [state, dispatch] = useReducer(cartReducer, []);Açıklama: useReducer cartReducer ve boş dizi alır.