Ek bilgiler
useReducer ile Todo Payload Bilgisinin Context API ile Kullanılması
useReducer yapısında silme (remove) fonksiyonunu kurgularken işin püf noktası dispatch mekanizmasını doğru çalıştırmaktır. Bir to-do elemanına tıklandığında tetiklenecek dispatch eylemine REMOVE_TODO tipini ve payload olarak silinecek elemanın ID bilgisini aktarıyoruz. Reducer fonksiyonumuz ise mevcut state içindeki listeyi filtreleyerek gelen payload ID'sine eşit olmayan elemanları yeni state olarak döndürüyor. Bu sayede sadece hedeflenen veriyi listeden ayıklayarak state yönetimini en sade ve güvenli biçimde çözmüş oluyoruz.
Yerel state üzerinde tıkır tıkır çalışan bu mantığı uygulamanın geneline yaymak için Context API devreye giriyor. SiteContext yapısı içine counter state'inin yanına to-do reducer'ını, başlangıç değerini (initialState) ve dispatch fonksiyonunu dahil ediyoruz. Birden fazla reducer kullandığımız durumlarda isimlendirmeleri ayrıştırarak (counterDispatch, todoDispatch) context sağlayıcısına nesne olarak teslim ediyoruz. Böylece uygulamanın farklı yerlerindeki bileşenler, ihtiyaç duydukları state ve dispatch metotlarına doğrudan useContext kancası üzerinden rahatça erişebiliyor.
Yapıyı modüler hale getirmek için liste görünümünü Todos.jsx gibi müstakil bir bileşene taşıyıp yerel bağımlılıkları temizliyoruz. Artık liste render edilirken ya da bir eleman silinirken gerekli state ve dispatch fonksiyonları doğrudan context üzerinden çekiliyor. Yerel state karmaşasından ve prop drilling derdinden kurtularak hem sayacı hem de görev listesini merkezi bir mimariye kavuşturmuş olduk. Bir sonraki adım olarak listeyi tamamen sıfırlayan bir reset aksiyonu ekleyip bu pratiği pekiştirmek tamamen size kalıyor.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
- Payload ile Veri İletimi: Silme işlemlerinde tüm nesneyi değil, yalnızca filtrelenecek elemanın benzersiz ID değerini payload olarak dispatch etmek yeterlidir ve en temiz yaklaşımdır.
- Reducer Filtreleme Mantığı:
filter() metoduyla gelen payload ID'sine eşit olmayan kayıtlar ayıklanarak state mutasyona uğratılmadan güncellenir.
- Çoklu Reducer Yönetimi: Tek bir context altında birden fazla
useReducer barındırırken dispatch ve state isimlerini çakışmayacak şekilde anlamlı adlandırmak karmaşayı önler.
- Bileşen Ayrımı ve Modülerlik: Görev listesini ayrı bir bileşene taşırken yerel reducer tanımlarını kaldırıp yalnızca context üzerinden tüketmek kodu hafifletir.
- Merkezi Mimari Avantajı: Context API sayesinde uygulamanın herhangi bir derinliğindeki bileşenden dispatch tetiklenerek küresel durum güvenle yönetilebilir.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)