State Yönetimi (Redux) Nedir?

State yönetimi nedir?

State, bir arayüzün belirli bir andaki durumunu belirleyen veridir: oturum açmış kullanıcı, sepetteki ürünler, bir formdaki yazılı değerler, açık olan menü, sunucudan gelen liste. Arayüz, bu verinin bir fonksiyonu gibi düşünülür; veri değişince ekran da değişir.

State yönetimi, bu verinin nerede tutulacağı, kimin değiştirebileceği ve değişiklikten etkilenen bileşenlerin nasıl güncelleneceği konusundaki düzenin tamamıdır. Küçük uygulamalarda her bileşen kendi verisini tutabilir. Uygulama büyüdükçe birden çok bileşenin aynı veriye ihtiyaç duyması, verinin bileşen ağacında yukarı aşağı taşınması ve verinin kim tarafından, neden değiştiğinin takip edilememesi sorun yaratır. State yönetimi kütüphaneleri bu karmaşayı düzene sokmak için ortaya çıkmıştır.

Redux nedir ve hangi sorunu çözer?

Redux, uygulamanın state'ini tek bir merkezi yerde toplayan ve değişikliklerin yalnızca belirli kurallarla yapılmasını zorunlu kılan bir JavaScript kütüphanesidir. React ile sık birlikte kullanılsa da React'e bağımlı değildir.

Redux'ın verdiği temel güvence öngörülebilirliktir. State yalnızca tanımlı kanallardan değiştiği için bir hatayı izlemek kolaylaşır: hangi olayın, hangi değişikliği yaptığı kayıt altına alınabilir. Bu özellik, geliştirici araçlarında state'in geçmişini adım adım geri sarıp incelemeyi de mümkün kılar. Ekiplerde herkesin aynı kalıba uyması da bakım kolaylığı sağlar.

Redux'ın temel kavramları nelerdir?

Redux'ın işleyişi şu parçalar üzerine kuruludur:

• Store: Uygulamanın tüm state'ini tutan tek nesnedir.
• Action: Ne olduğunu anlatan düz bir nesnedir. Örneğin kullanıcının bir ürünü sepete eklediğini bildirir.
• Reducer: Mevcut state ile gelen action'ı alıp yeni state'i döndüren saf fonksiyondur. Eski state'i değiştirmez, yeni bir kopya üretir.
• Dispatch: Bir action'ı store'a göndermek için çağrılan işlemdir.
• Selector: Store'dan bileşenin ihtiyacı olan parçayı okuyan fonksiyondur.

Akış tek yönlüdür: kullanıcı bir şey yapar, bileşen action gönderir, reducer yeni state'i üretir, store güncellenir ve ilgili bileşenler yeniden çizilir. Bu tek yönlü akış, verinin nereden geldiğini her zaman açık tutar.

Redux Toolkit ve asenkron işler

Klasik Redux, çok sayıda tekrar eden kod gerektirdiği için eleştirilmiştir. Bugün resmî olarak önerilen yöntem, aynı kavramları daha az kodla kullanmayı sağlayan Redux Toolkit'tir. Redux Toolkit, reducer ve action'ları tek bir yapıda tanımlamaya izin verir ve state'i güvenli biçimde güncellemeyi kolaylaştırır.

Sunucudan veri çekme gibi asenkron işlemler, reducer'ın içinde yapılamaz çünkü reducer saf kalmalıdır. Bu işler ayrı bir katmanda, genellikle bir asenkron akış mekanizmasıyla yürütülür; işlem başladığında, başarıyla bittiğinde ya da hata verdiğinde ilgili action'lar gönderilir ve reducer bunlara göre yükleniyor, başarılı, hatalı gibi durumları tutar.

Redux ne zaman gerekir, ne zaman gerekmez?

Her state merkezi store'a ait değildir. Pratikte state'in türleri ayrılır: bir bileşenin yerel durumu (açık mı kapalı mı), formdaki geçici değerler, sunucudan gelen veri ve gerçekten uygulama genelinde paylaşılan veri. Bunların her biri için farklı araç uygun olabilir.

Redux şu durumlarda anlamlıdır: birçok bileşen aynı state'i okuyup değiştiriyorsa, state değişikliklerinin izlenebilir olması önemliyse, ekip büyük ve ortak bir kalıba ihtiyaç duyuyorsa. Küçük bir uygulamada yalnızca birkaç bileşen veri paylaşıyorsa bileşenin kendi state'i ya da Context mekanizması çoğu zaman yeterlidir. Sunucudan gelen veriyi önbelleğe alıp yenilemek için ise bu işe özel kütüphaneler bulunur; bu veriyi Redux'a kopyalamak gereksiz karmaşıklık yaratabilir.

Daha hafif bir model arayanlar için Zustand gibi kütüphaneler, daha az tören ile merkezi bir store sunar.

State yönetimi Mindset programlarında nerede çalışılır?

Frontend Durum Yönetimi Desenleri (Redux, Zustand) eğitiminde Durum Türleri ve Tek Yönlü Akış, Redux Toolkit ile Merkezi Durum, Asenkron Akışlar ve Yan Etki Yönetimi, Zustand ile Hafif Store Tasarımı ve Sunucu Durumu ve Önbellek Sınırı modülleri yer alır.