useDispatch

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.

Örnek çözümü göster

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())} />
  );
}

Kendini test et

dispatch(increment) neden yanlış?
- Çünkü increment() çağrısı gerekir
- Çünkü dispatch parametre almaz
- Çünkü hook kullanılamaz
- Çünkü increment bir sayıdır
Cevabı göster

Çünkü hook kullanılamaz — Action creator'ı çağırarak nesne üretmelisin.
Dispatch parçalarını eşle

useDispatch

Dispatch işlevini verir
increment()

Action nesnesi üretir
dispatch(...)

Action'ı store'a gönderir
onPress

Olay tetikler

Action creator çağrısı

onPress={() => dispatch(____())}

Cevabı göster

onPress={() => dispatch(increment())}

Sıradaki ders: useSelector

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler