useDispatch
- React Native kursu
- İleri seviye
- Ders 52/83
- 5 dk
useDispatch ile action dispatch öğrenirsin.
useDispatch
useDispatch, react-redux'tan gelen bir hook'tür. Bileşen içinden action göndermek için kullanılır. const dispatch = useDispatch() ile dispatch işlevi alınır; sonra dispatch(increment()) çağrısı yapılır. Dispatch, action'ı store'a iletir; ilgili reducer çalışır ve state güncellenir.
Önemli: action creator'ı çağırarak nesne üretmelisin. dispatch(increment) yanlıştır; dispatch(increment()) doğrudur. Çünkü increment() çağrısı { type: 'counter/increment' } nesnesini döner ve dispatch bu nesneyi bekler.
useDispatch ile buton
Tipik kullanımda bir butonun onPress olayında dispatch yapılır. Önce useDispatch ile dispatch alınır, sonra onPress={() => dispatch(increment())} yazılır. Böylece her basışta counter/increment action'ı gönderilir ve sayaç artar.
Birden fazla action creator varsa hepsini bileşen başında içe aktarabilirsin: import { increment, decrement } from './counterSlice'. Dispatch çağrısı buton sayısına göre çoğalır; her biri ayrı bir action gönderir.
Uygulama Dispatch butonu
CounterButton bileşenini tamamla. useDispatch'i içe aktar. increment action creator'ını ./counterSlice'tan al. Butonun onPress'inde dispatch(increment()) çağır.
Başlangıç kodu
import React from 'react';
import { Button } from 'react-native';
export function CounterButton() {
// dispatch al ve buton onPress'inde increment çağır
return null;
}Örnek çözüm
import React from 'react';
import { Button } from 'react-native';
import { useDispatch } from 'react-redux';
import { increment } from './counterSlice';
export function CounterButton() {
const dispatch = useDispatch();
return (
<Button title="Artir" onPress={() => dispatch(increment())} />
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 dispatch(increment) neden yanlış?
- Çünkü increment() çağrısı gerekir
- Çünkü dispatch parametre almaz
- Çünkü hook kullanılamaz Doğru cevap
- Çünkü increment bir sayıdır
Açıklama: Action creator'ı çağırarak nesne üretmelisin.
2 Dispatch parçalarını eşle
| Kavram | Anlamı |
|---|---|
useDispatch |
Dispatch işlevini verir |
increment() |
Action nesnesi üretir |
dispatch(...) |
Action'ı store'a gönderir |
onPress |
Olay tetikler |
3 Action creator çağrısı
onPress={() => dispatch(____())}onPress={() => dispatch(increment())}Açıklama: increment() action nesnesini döner.