Redux with React 2023 9 – Çoklu State İle Çalışmak

Ö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.

Şimdiye kadar projemizde store içinde tek bir değer tuttuk ve bu durumun güncellenmesiyle ilgilendik.

Bu yazımda çoklu state kullanımına bakacağız.

Uygulamamıza artırma azaltma butonlarını açma kapama butonu ekleyelim.

<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 className="button-container">
                <button>
                    ToggleButton
                </button>
            </div>
        </div>

Eklediğim Kod

<div className="button-container">
                <button>
                    ToggleButton
                </button>
            </div>

Butonların açılıp kapanma durumunu showButton değişkeni ile tutacağız. O yüzden CounterStore içinde state tanımlamamızı güncelliyoruz.

const initialState = {

  counter: 0,
  showButton : true,

};

Bu değeri oluşturup counterReducer fonksiyonumda state olarak vereceğim.

const counterReducer = (state = initialState, action)

Bu değerin güncellemesini yapabilmek için type değerim SHOW_BUTTON olacak.

Bunun güncelleme kodlarını aşağıdaki gibi yazıyorum.

else if (action.type === "SHOW_BUTTON") {
    return {
      ...state,
      showButton: !state.showButton,
    };
  }

Artık state’imiz tek bir değişkenden oluşmadığı için, başlangıçta …state ile tüm değerleri alıp üzerinde güncelleme yapmak istediğimi sonradan yapıyoruz.

Bu …state eklemesini diğer işlemlere de eklemeliyiz.

CounterStore.js Tüm Kodlar

import { createStore } from "redux";

const initialState = {

  counter: 0,
  showButton : true,

};

const counterReducer = (state = initialState, action) => {

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

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

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

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

  else if (action.type === "SHOW_BUTTON") {
    return {
      ...state,
      showButton: !state.showButton,
    };
  }
  
  return state;
};

const store = createStore(counterReducer);

export default store;

Sıra geldi butona bastığımızda bu action’ın tetiklenip showButton durumunun güncellenmesine.

const toggleHandler = () => {

        dispatch({ type: 'SHOW_BUTTON' });

    } 

Butonun onClick eventine toggleHandler isimli fonksiyonu bağlayacağım.

<div className="button-container">
                <button onClick={toggleHandler}>
                    ToggleButton
                </button>
            </div>

showButton değişkenini yakalayıp butonlarımızı gösterip kapatalım.

const { counter, showButton } = useSelector(state => ({
        counter: state.counter,
        showButton: state.showButton
    }));

showButton’un durumuna göre jsx içinde güncelleme yapalım.

{
                showButton && <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>
            }

Tüm Kodlar

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

function Counter() {
    const { counter, showButton } = useSelector(state => ({
        counter: state.counter,
        showButton: state.showButton
    }));

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

    const toggleHandler = () => {
        dispatch({ type: 'SHOW_BUTTON' });
    }


    return (
        <div className="counter">
            <h1>Counter: {counter}</h1>

            {
                showButton && <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 className="button-container">
                <button onClick={toggleHandler}>
                    ToggleButton
                </button>
            </div>
        </div>
    );
}

export default Counter;

Uygulama Test

Her şey istediğimiz gibi.

Bir sonraki yazımda görüşmek üzere.