16 Temmuz 2018

 Redux ile React Uygulamalarında Veri Yönetimi

Sizden gelen yorumlar üzerine bu yazımda React uygulamalarda veri yönetimine değinmek istedim. Flux ve Redux kavramları çoğu kişinin kafasını karıştırmış anlaşılan.

Redux tam olarak javascript uygulamaları için bir state holderdır.

Redux: Uygulamanın o an bulunan stateini tutar.

Çıkış Nedeni?

Facebook’un mesaj fasilitesinde gelen bir mesajınız olduğunda yukarıda bildirim ikonu çıkardı ve kaç mesaj varsa rakamla o yazardı. Mesajı açıp inputa focus olduğunuzda o ikon siliniyordu. Daha sonra mesaj sayfasını yaptılar ve bu kontrol 2 yerde birden olmaya başladı. Yani mesaj sayfasına tıkladığınızda veya küçük pencereye tıkladığınızda bildirim kayboluyordu. Ama bu ikisinin birbiriyle haberleşmesi karışıklığa yol açıyordu ve bazen yanıp yanıp sönüyordu o bildirim.

Facebook bu bugla baya bir boğuştu sebep olarak da mvc yani çift yönlü veri akışının neden olduğuna karar verdiler. Veri akışını baştan kurguladılar.

Problem: Kontrolsüz veri akışı

Çözüm: MVC’deki two-way data bindingi kaldırıp, tek yönlü veri akışı sağlayan FLUX’ı icat ediyorlar.

Facebook tarafından geliştirilen tek yönlü veri akışı mantığına dayanan bir pattern. *Kütüphane değil, bakış açısı

Bütün işlermlerin filtrelendiği yer dispatcher. Gördüğünüz üzere Dispatcher => Reducer => View diye tek yönlü bir veri akışı var ve tüm view değişiklikleri Dispatcher da filtrelendikten sonra yapılır. Böylece karışıklık olmuyor.

Viewler Event (action) dispatchera gönderiyor ve dispatcher da storelara gönderiyor. Viewlar storeları dinliyor, subscribe oluyorlar ve kendileri ile ilgili bir değişiklik geldiğinde kendilerini update ediyorlar.

Redux vs Flux

  • Flux bir kütüphane değil sadece bakış açısı. Daha sonra Dan Abramov adlı arkadaş bunu biraz daha iyileştirerek kütüphaneye çeviriyor.
  • Redux Hot Reload güncelleme yapıldıktan sonra sayfayı refresh etmiyor. Sayfada bölgesel update yapıyor. Flux’ta hot reload yok.
  • Refresh olmadığından update sonrası history tutuyor, state duruyor. Eski state historysine ulaşılabilir.
  • Tek store ve tek state var. Flux’ta store birden fazla.

Sorunun temel nedeni React iç içe komponentlerden oluşuyor ve bunların arasında iletişim olması gerekiyor.

*Büyük çaplı projelerde bu büyük sorun yaratıyor.

Redux’ta Single store var. Komponent ağacından herhangi bir komponent store’u güncelliyor.

Store güncellendiğinde de diğer komponentler store’u dinlediğinden hemen ilgili yerleri update ediyorlar.

Kavramlar

State:

Uygulamanın o anki durumu.

Store tarafından yönetilen, genellikle iç içe objelerden oluşan ve tüm uygulamanın bütün durumunu tutan single state değer.

*State mutate edilemez, kopyasını alıp değiştirilir.

Action:

State’i değiştirmek için kullanılan ve bu değişiklik için gerekli datayı taşıyan object.

Direkt kullanılır.

ASYNC Action:

Dispatcher’a gönderilen bir değer, action’dan farkı henüz reducer tarafından kullanılmaya hazır olmamasıdır. Öncesinde middleware tarafından dönüştürülmelidir.

Direkt kullanılmaz. Gelen değere bakılır ona göre aksiyon alınır.

Reducer:

Aldığı veri ve değeri tek bir değere dönüştürerek dönen fonksiyon.

Redux için alınan değer action, geri dönülen değer ise state objesidir.

Yan etkileri olmayan pure function şeklinde olmalıdır.

Dispatcher:

Middlewareler aracılığı ile gelen actionları işleyen, yorumlayan fonksiyondur. Dispatcher kendisine gelen işlemi store’a gönderir. Storların kendi içerisinde işlem türünü kontrol etmesi gerekir ve kendisine ait bir işlem ise ilgili state güncellemesini gerçekleştirir.

Dispatch metodu:

Action’ı store’a gönderir. Aldığı action’ı store tarafından sağlanan state ile birlikte her zaman senkron olarak gönderir.

Action Creator:

Action yaratır. Action creator bizden type ve payload bilgisi bekler. Type işlemin türünü belli eder. Payload ise o işlemin taşıdığı data diyebiliriz. Genelde object taşır. Action creator’a gönderilen data’yı şu şekilde gösterebiliriz. {type:KULLANICI_LİSTELE, payload:{listelendimi:EVET}}

Action creator’la bir işlem başlatıldığında bu işlem bir sonraki eleman olan dispatcher’a otomatik olarak aktarılır.

Store:

Uygulamanın statelerini barındıran object.

Middleware:

Aldığı action veya async action’ı bir sonraki adım için dönüştüren fonksiyon. Genellikle API çağrıları için kullanılır.

Redux ile ilgili basit bir örnek:

Bir Frontendci

Frontendci.com, sektörde çalışan ve gelecekte bu sektörde çalışmak isteyen tüm frontend geliştiriciler için türkçe html, css ve javascript eğitim, anlatım kaynaklarını derlemek amacıyla kurulmuştur. Türkçe eğitim videoları, anlatımlar, makaleler ve sunumların toplandığı bir mecradır.

Tüm içerikleri göster

Yorum yap

Bir Cevap Yazın