Action dispatch
- React Native kursu
- Orta seviye
- Ders 26/116
- 5 dk
dispatch ile action göndermeyi öğrenirsin.
dispatch nedir?
dispatch, useReducer'ın döndürdüğü ikinci değerdir; bir action gönderen fonksiyondur. dispatch({ type: "increment" }) yazdığında React bu action'ı reducer'a geçirir ve state güncellenir.
Action bir nesnedir; genelde type özelliği zorunludur. Ek veri de taşınabilir: dispatch({ type: "add", payload: 5 }) gibi. payload alanı serbest isimlidir; ama type geleneği yaygındır. dispatch çağrıldığında reducer çalışır, yeni state hesaplanır ve bileşen yeniden render edilir. Butonların onPress'ine dispatch bağlamak, kullanıcı etkileşimini state değişimine çevirir.
dispatch kullanımı
dispatch'i bir olay işleyicide çağırırsın. Örneğin bir butonun onPress'ine () => dispatch({ type: "increment" }) verirsin. Kullanıcı butona basınca bu fonksiyon çalışır ve action gönderilir.
Birden çok dispatch çağrısı peş peşe yapılabilir; her biri için reducer ayrı ayrı çalışır. Action nesnesini doğrudan dispatch'e vermek yerine, önce bir fonksiyonla oluşturmak da yaygındır: const increment = () => dispatch({ type: "increment" }). Bu, kodu okunabilir kılar. Action yalnızca bir nesne olduğu için test edilmesi kolaydır; reducer'ı doğrudan action nesnesiyle çağırıp sonucu kontrol edebilirsin.
Uygulama dispatch ile artır
Bir Counter bileşeni yaz. useReducer'ı reducer ve initialState (0) ile çağır. Bir butona basıldığında dispatch({ type: "increment" }) çağrılsın. reducer, "increment" case'inde state + 1 döndürsün. Bileşen <Text>{state}</Text> döndürsün.
Başlangıç kodu
// useReducer'ı içe aktar
// reducer fonksiyonunu tanımla; increment için state + 1 döndür
// initialState'i 0 olarak tanımla
function Counter() {
// useReducer'ı reducer ve initialState ile çağır
// Butona basınca artırma action'ı gönder
return <Text>Sayaç</Text>;
}Örnek çözüm
import { useReducer } from "react";
import { Button, Text } from "react-native";
function reducer(state, action) {
switch (action.type) {
case "increment":
return state + 1;
default:
return state;
}
}
const initialState = 0;
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
<Button onPress={() => dispatch({ type: "increment" })} title="Artır" />
<Text>{state}</Text>
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
dispatch |
Action gönderir |
action |
Olay tanımı |
type |
Action türü |
payload |
Ek veri |
2 dispatch'i çağır
<Button onPress={() => ____({ type: "increment" })} title="Artır" /><Button onPress={() => dispatch({ type: "increment" })} title="Artır" />Açıklama: dispatch ile action gönderilir.
3 dispatch ne zaman çağrılır?
dispatch({ type: "increment" });- useEffect içinde her zaman
- Bir olay algılandığında Doğru cevap
- Hiçbir zaman
- Yalnızca reducer içinde
Açıklama: dispatch bir olay algılandığında çağrılır.