React Tutorial 2023 31 – useState Hook’u 3 – Spread Operatörü İle State Kontrolü

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

Bir önceki yazımda birden fazla state kullanımını görmüştük.

Ancak yaptığımız işlemlerde her state’i tek tek tanımlamıştık. 100 tane takip edilecek state olsaydı, tek tek hepsini yazmak biraz bizi yorabilirdi. Kod tekrarı kodun bakımını ve okunurluğunu çok zorlaştırırdı.

Bunun için tek bir state objesi tanımlayıp içinde durumunu takip edeceğimiz değişkenleri tanımlasak ve sadece ilgili olanları güncellenmesini sağlasak çok iyi olurdu.

Bunu Calculator uygulamamızda yapacağız.

Kodlarımızı aşağıdaki gibi güncelleyelim.

State Değişkenlerini Tek Bir Obje İçinde Birleştir

Calculator.jsx’deki aşağıdaki kodları;

const [result, setResult] = useState(0);
const [count, setCount] = useState(0);

Aşağıdaki kodlarla değiştirelim.

const [allState, setAllState] = useState({
        result: 0,
        count: 0
    });

Böylece artık değişkenlerimizin durumlarını tek bir obje üzerinden takip edeceğiz.

Tabi bunu böyle güncelledikten sonra çağrıldıkları yerleri şöyle güncelleriz.

<div className="result">
     <h1 id="result">{allState.result}</h1>
     <span>İşlem Adeti: {allState.count}</span>
</div>

State’leri Güncelle

Sıra geldi bu state’in güncellenmesine.

Sadece result’ı güncellemek istediğimde şunu yaparız, objenin içindeki önceki değerleri aynen alırız. Bunu daha önce gördüğümüz spread kavramıyla yapıyoruz. Yani objenin kendisini alıp önüne …(üç nokta) koyduğumuzda gerçekleştirebiliyorduk. Daha sonra güncelleyeceğimiz değişkenin yeni değerini veriyoruz.

setAllState({
            ...allState,
            result: result
 })

Bir de aynısından count için yapalım.

setAllState({
            ...allState,
            count: allState.count + 1,
})

Bu şekilde statelerimizi güncellemiş olduk.

Tabii iki state aynı yerde ve artarda değiştirildiği için tek seferde bu işi çözebiliriz.

setAllState({
            ...allState,
            result: result,
            count: allState.count + 1,
})

Tekrar çıktımız kontrol ettiğimizde istediğimiz sonuçları hala alıyor olmalıyız.

Spread ile bu şekilde statelerimizi kolaylıkla güncelleyebiliriz.

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