Redux with React 2023 8 – action İle Değer Gönderip State Güncelleme

Ö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, action parametresi içinde istediğimiz değeri gönderip state güncellemeye bakacağız.

Çoğu zaman uygulamalarımızda state değerlerimiz static değerlerle güncellenmez. Bu güncellemeleri dinamik olarak göndereceğimiz değerlerle de güncelleyebiliriz.

Şimdi ilk olarak uygulamama bir tane 5’er 5’er artırma ve Clear yani değeri sıfırlama butonu ekleyeceğim.

<div className="counter">
            <h1>Counter: {counter}</h1>
            <div className="button-container">
                <button onClick={incrementHandler}>
                    Increase
                </button>
                <button onClick={decrementHandler}>
                    Decrease
                </button>
                <button>
                    Increase by 5
                </button>
                <button>
                    Clear
                </button>
            </div>
        </div>

Görüntümüz şuna dönüştü.

Butonlarıma iki tane fonksiyon yazacağım.

<button onClick={increaseByFiveHandler}>
                    Increase by 5
                </button>
                <button onClick={clearHandler}>
                    Clear
                </button>

Bağladığım bu fonksiyonların içeriğini yazalım.

const increaseByFiveHandler = () => {

        dispatch({ type: 'INCREASE_BY_FIVE', payload: 5 });

    }

    const clearHandler = () => {

        dispatch({ type: 'CLEAR' });   
    
    }

Burada dispatch içinde oluşturduğumuz obje içinde istediğimiz değerleri gönderebiliriz. Buradan gönderdiğimiz ismiyle CounterStore içinde yakalayıp işleme dahil edebiliriz.

İki tane yeni type’ım geldi. Bunların geliştirmelerini CounterStore.js içinde gerçekleştirelim.

import { createStore } from "redux";

const counterReducer = (state = { counter: 0 }, action) => {

  if (action.type === "INCREMENT") {
    return {
      counter: state.counter + 1,
    };
  }

  else if (action.type === "DECREMENT") {
    return {
      counter: state.counter - 1,
    };
  }

  else if (action.type === "INCREASE_BY_FIVE") {
    return {
      counter: state.counter + action.payload,
    };
  }

  else if (action.type === "CLEAR") {
    return {
      counter: 0,
    };
  }

  return state;
};

const store = createStore(counterReducer);

export default store;

Konumuz şu kodlarda.

else if (action.type === "INCREASE_BY_FIVE") {
    return {
      counter: state.counter + action.payload,
    };
  }

5 değerini action’da payload olarak gönderdiğim için, burada action.payload ile yakalayabiliyorum. payload ismi standart değildir. İstediğiniz ismi verebilirsiniz.

Kodların Tamamı

import React 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' });

    }

    const increaseByFiveHandler = () => {

        dispatch({ type: 'INCREASE_BY_FIVE', payload: 5 });

    }

    const clearHandler = () => {

        dispatch({ type: 'CLEAR' });   
    
    }


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

export default Counter;