Redux with React 2023 7 – useDispatch Hook Kullanımı

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Bu yazımda, oluşturduğum store’daki state‘i değerlerini güncellemeyi göreceğiz.

Bunun için useDispatch Hook’unu kullanacağız.

useDispatch hook’u, React Redux kütüphanesindeki bir hook’tur ve Redux store’a eylemleri göndermek için kullanılır. Bu hook, bileşen içindeki bir fonksiyon aracılığıyla Redux store’a eylem göndermeyi sağlar.

Genel kullanımı şu şekildedir:

import { useDispatch } from 'react-redux';

// ...

const dispatch = useDispatch();

Bu hook’u kullanarak, bir eylemi tetiklemek için dispatch fonksiyonunu çağırabilirsiniz. Örneğin, bir “INCREMENT” eylemini tetiklemek için:

dispatch({ type: 'INCREMENT' });

Bu, Redux store’a “INCREMENT” türündeki bir eylemi gönderir. Redux store, bu eylemi ele alacak olan ilgili reducer’ı çalıştırır ve durumu günceller.

Genellikle bu hook, bir olayın gerçekleştiği bir kullanıcı etkileşimi veya diğer bileşen içi olaylar sırasında Redux store’a eylem göndermek için kullanılır.

const handleIncrement = () => {
  dispatch({ type: 'INCREMENT' });
};

Bu örnekte, handleIncrement fonksiyonu çağrıldığında, Redux store’a “INCREMENT” türündeki bir eylem gönderilir.

useDispatch hook’u, Redux eylemlerini bileşen içinde kullanılabilir ve bu sayede bileşenin durumu Redux store ile etkileşimde bulunabilir.

Kendi projemize bakalım şimdi.

Import useDispatch

import { useSelector, useDispatch } from 'react-redux';

Dispatch Objesini Oluştur

const dispatch = useDispatch();

Butonların onClick olaylarına ayrı ayrı aşağıdaki fonksiyonları tanımlayacağız.

<button onClick={incrementHandler}>
                    Increase
                </button>
                <button onClick={decrementHandler}>
                    Decrease
                </button>

Bu iki fonksiyonu oluşturup store’a bağlanıp değişimlerin gerçekleşmesini sağlayacağım.

const incrementHandler = () => {

        dispatch({ type: 'INCREMENT' });

    }

    const decrementHandler = () => {

        dispatch({ type: 'DECREMENT' });

    }

Store’daki değeri değiştirmek için tanımladığım dispatch fonksiyonuna bir obje göndereceğim. Bu objenin type değerine hangi işlemi yaptırmak istiyorsak onun bilgisini geçip gönderiyoruz.

Kodlarımızın Tamamı

Counter.jsx

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import './Counter.css';

function Counter() {
    const counter = useSelector(state => state.counter);
    const dispatch = useDispatch();

    const incrementHandler = () => {

        dispatch({ type: 'INCREMENT' });

    }

    const decrementHandler = () => {

        dispatch({ type: 'DECREMENT' });

    }


    return (
        <div className="counter">
            <h1>Counter: {counter}</h1>
            <div className="button-container">
                <button onClick={incrementHandler}>
                    Increase
                </button>
                <button onClick={decrementHandler}>
                    Decrease
                </button>
            </div>
        </div>
    );
}

export default Counter;

Uygulama Test

Her şey istediğimiz gibi.

Bir sonraki yazımda, butonlara basınca değerin 1’er 1’er artıp azalmasını değil de payload değişkeni ile gönderdiğim değerlerle işlem yapmasına bakacağız.

Görüşmek üzere.