Ek bilgiler
Redux Toolkit ile Todo Elemanının Silinmesi ve Çoklu Slice Yönetimi
Daha önce benzer adımları defalarca yaptığımız için bu aşamayı videoyu izlemeden bile rahatlıkla tamamlayabilirsiniz. Elimizdeki liste yapısından bir elemanı çıkartmak için ihtiyaç duyduğumuz tek kritik veri, ilgili elemanın indeks veya id bilgisidir. Slice içerisinde tanımlayacağımız removeTodo reducer fonksiyonuyla, action.payload üzerinden gelen indeks bilgisini yakalayıp mevcut state içerisinden ilgili kaydı temizliyoruz.
Diziden eleman silme işleminde state.splice(action.payload, 1) yöntemini doğrudan kullanabiliyoruz; zira Redux Toolkit arka planda Immer kütüphanesini çalıştırdığı için mutable gibi görünen bu işlem state bütünlüğünü korur. Ardından bileşen tarafında useDispatch hook'unu çağırıp liste elemanının onClick olayında dispatch(removeTodo(index)) tetiklemesini yapıyoruz. Böylece tıklandığı anda hedeflenen todo elemanı anında state'ten ve ekrandan temizlenmiş oluyor.
Arayüz tarafında CSS, animasyon veya kullanıcı deneyimini zenginleştirecek görsel detaylar kasıtlı olarak eklenmedi; bu süslemeler temel mantığın önüne geçmemeli. Zaten Bootstrap ve styled-components gibi stillendirme konularını daha önceki bölümlerde derinlemesine inceledik. Bu aşamayla birlikte Redux Toolkit çatısı altında birden fazla slice yapısının nasıl kurgulandığını ve yönetildiğini pratik ederek temel akışı başarıyla tamamlamış olduk.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
- İndeks ile Eleman Çıkarma: Silme işleminde hedeflenen öğeyi yakalamak için reducer'a parametre (
payload) olarak indeks veya id aktarılır.
- Immer Desteğiyle Pratik Dizi İşlemleri: Redux Toolkit Immer entegrasyonu barındırdığından, doğrudan
state.splice() metoduyla güvenli bir şekilde silme yapılabilir.
- useDispatch ile Tetikleme: Bileşen üzerinde tıklama (
onClick) olayında dispatch(removeTodo(index)) çalıştırılarak silme aksiyonu tetiklenir.
- Mantık ve Arayüz Ayrımı: Öğrenme sürecinde asıl odak state yönetimi mekanizmasıdır; stil ve UI iyileştirmeleri amaca göre sonradan eklenmelidir.
- Çoklu Slice Hakimiyeti: Birden fazla slice kullanarak uygulamanın farklı state parçaları modüler ve yönetilebilir bir mimariye kavuşturulur.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)