React Native
Action dispatch
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.
Örnek çözümü göster
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>
</>
);
}
Kendini test et
-
Parçayı rolüne eşle
- dispatch
- Action gönderir
- action
- Olay tanımı
- type
- Action türü
- payload
- Ek veri
-
dispatch'i çağır
<Button onPress={() => ____({ type: "increment" })} title="Artır" />
Cevabı göster
<Button onPress={() => dispatch({ type: "increment" })} title="Artır" />
-
dispatch ne zaman çağrılır?
dispatch({ type: "increment" });
- useEffect içinde her zaman
- Bir olay algılandığında
- Hiçbir zaman
- Yalnızca reducer içinde
Cevabı göster
Bir olay algılandığında — dispatch bir olay algılandığında çağrılır.
Sıradaki ders: Initial state
