Redux with React 2023 6 – useSelector 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 değerimi alıp istediğim jsx dosyam içinde kullanabilmeye bakacağız.

Bu redux store’unu istediğim yerde yakalayabilmem için yine react-redux paketinin bir hook’u olan useSelector Hook’unu kullanmam gerekir.

useSelector Hook’u Nedir?

useSelector hook’u, React Redux kütüphanesindeki bir hook’tur ve Redux store’undan belirli bir parçayı seçmek için kullanılır. Bu hook, React bileşenlerinin Redux store’undan durum bilgisine erişmelerini sağlar.

Genel kullanımı şu şekildedir:

import { useSelector } from 'react-redux';

// ...

const selectedData = useSelector(selectorFunction);

selectorFunction parametresi, Redux store’dan almak istediğiniz durumu seçmek için kullanılır. Bu bir fonksiyon olabilir ve bu fonksiyon, Redux store durumunu alıp, bileşenin ihtiyaç duyduğu belirli bir parçayı seçer.

Örneğin, bir sayaç uygulamasında counter adlı bir durum varsa ve bu durumu seçmek istiyorsanız:

const counter = useSelector(state => state.counter);

Bu örnekte, state Redux store’unun tamamını temsil eder ve state.counter şeklinde kullanılarak counter durumu seçilir.

Bu hook, bileşenin sadece ihtiyaç duyduğu belirli durum parçalarını seçmesine olanak tanır. Böylece, gereksiz yeniden render’ları önleyerek performansı artırabilir. useSelector hook’u, Redux store’da herhangi bir değişiklik olduğunda otomatik olarak bileşeni günceller.

Kendi projemize bakalım şimdi.

Import useSelector

import { useSelector } from 'react-redux';

Store’daki Değeri Al

const counter = useSelector(state => state.counter);

Bu değeri jsx kodları içinde kullan.

<h1>Counter: {counter}</h1>

Kodlarımızın Tamamı

Counter.jsx

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

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

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

export default Counter;