Redux Uygulamasının Çalışmasının Tartışılması

Önceki derslerde, bir Redux uygulamasının çalışması için gerekli olan tüm bileşenleri uyguladık. Haydi bir özet yapalım ve uygulamamızın ana çalışma aşamalarını kısaca gözden geçirelim.

İlk çalıştırmada, uygulamamız mağazadan (store) useSelector ile iki ürünün listesini alır ve bunları ekranda görüntüler. Ekranda ayrıca, yeni bir ürünün verilerini girebileceğimiz bir form da görüntülenir. Kullanıcı kaydetme düğmesine bastığında, düğmenin işleyicisi, kullanıcının forma girdiği yeni ürün verilerini içeren bir productAdded eylemi (action) gönderir. Ürünler dilimi (slice) için yazdığımız reducer fonksiyonu bu eylemi alır ve ürünler dizisine yeni ürün nesnesini ekler. Mağaza (store), bileşenlere saklanan state verilerinin değiştirildiğini söyler. ProductsList bileşenimiz değiştirilmiş diziyi okur, render işlemini tetikler, böylece ürünler listesinde eklenen ürünü görürüz.

Şimdi tarayıcıda Redux DevTools'u açalım ve uygulamaya başka bir ürün daha ekleyelim, ardından Log monitor sekmesine bakalım, burada uygulamamız başlatıldığında state'imizin nasıl olduğunu ve ardından, kaydetme düğmesine bastıktan sonra bir eylemin (action) nasıl göründüğünü görebiliriz. Onun payload özelliğini ve global statedeki değişiklikleri görebiliriz.

Bir sonraki bölümde, Redux uygulamamızdaki verilerle daha kapsamlı bir şekilde çalışacağız.