React Tutorial 2023 45 – useReducer Hook’u 1 – Kavramsal Olarak useReducer

Ö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ımla beraber yeni bir Hook anlatımına geçiyorum. Öncelikle kavramsal olarak ele alıp daha sonra örnek projeler üzerinden anlatımını gerçekleştireceğim.

useReducer Nedir?

useReducer, React’ta bir state yönetim tekniğidir ve genellikle karmaşık durum yönetimi gerektiren durumlarda tercih edilir. Bu kavram, genellikle useState ile yapılan durum yönetimine bir alternatiftir ve özellikle büyük ve karmaşık uygulamalarda kullanıldığında avantaj sağlar.

Bu kavramın temelinde, bir bileşenin durumunu güncellemek için kullanılan fonksiyonun daha karmaşık bir yapıda olması yatar. Birincil avantajı, state değişimlerini işlemek için bir dizi özel mantık tanımlayabilmenizdir. Bu, kodunuzun daha öngörülebilir ve sürdürülebilir olmasına yardımcı olabilir.

Aslında useReducer Hook’u yapısı itibariyle state yönetimindeki if else yapısını oluşturur. Yani bir state’in durumunu değiştirebilecek birden fazla durum varsa useReducer ile bunu yönetebiliriz.

userReducer Yapısı

useReducer‘ın temel yapısı, bir durum (state) nesnesi ve bu durumu güncellemek için kullanılan bir “reducer” fonksiyonu içerir. Reducer fonksiyonu, mevcut durumu ve bir eylemi (action) alır, bu eylemi temel alarak yeni bir durum üretir. Bu durum güncellemesi, bileşenin state’ini değiştirmek için kullanılır.

Örnek Senaryo

Bir useReducer örneğini anlamak için, bir örnek senaryoyu ele alalım:

Bir alışveriş sepeti uygulaması düşünelim. Sepetin durumunu yönetmek için bir useReducer kullanabiliriz. Reducer fonksiyonumuz, kullanıcı ürün eklediğinde veya çıkardığında ne yapılacağını belirler. Örneğin, “Ürün Ekle” eylemi, sepet durumunu güncelleyerek yeni bir ürün ekler.

Bu şekilde, useReducer sayesinde uygulamamızın karmaşık durumlarını daha düzenli ve okunabilir bir şekilde yönetebiliriz. Buna ek olarak, useReducer daha fazla kontrol sağlar ve bir dizi eylemi ele alabilme esnekliği sunar.

Ne Zaman Kullanmalı Ne Zaman Kullanmamalıyız?

Ancak, her durumda useReducer kullanmak uygun olmayabilir. Basit durum yönetimleri için useState kullanmak daha pratik olabilir. useReducer, genellikle durum yönetimindeki karmaşıklığı ele almak ve kodu daha organize hale getirmek istediğinizde tercih edilen bir araçtır.

Sonuç olarak, useReducer, React uygulamalarında durum yönetimi için kullanılan güçlü bir araçtır. Daha karmaşık uygulamalarda, özellikle de durum değişikliklerini daha özelleştirilmiş bir şekilde yönetmek istediğinizde, useReducer kullanmak kodunuzu daha sürdürülebilir ve okunabilir kılabilir.

Bir sonraki yazımda örnek uygulamamızla olayı inceleyelim.