MİMARİ ÖRÜNTÜLER

Flux Mimari Örüntüsü

UI Mimari örüntülerini incelediğimizde karşımıza MVC, MVP ve benzer örüntülerin çıktığını görürüz. Bu yazımda React ve Redux ile popülerleşen Flux mimari yapısını anlatmaya çalışacağım.

Flux Mimarisi
  • Dispatcher sadece Action tarafından tetiklenebilir.
  • Store sadece Dispatcher tarafından tetiklenebilir.
  • View sadece Store tarafından (Not: kendi iç state değişimleri ve Routing değişimleri hariç)

Flux Mimarisinin Bileşenleri

Flux 4 soyutlama bileşeninden oluşur.

  • Ekranda ilk açılırken sunucudan veri çekme işlemide
  • Sunucudan Veri Çekilmesini Sağlatmak Bir Aksiyondur.
  • Ekrandaki bir düğmeye basıp bazı bileşenlerin gizlenmesini ve gösterilmesi için
  • Mevcut UI State değiştirmek için yapılan işlemler

Flux Gerçekleştirimleri (Implementation)

  • React → Redux, MobX
  • Vue → VueX
  • Angular → NgRx

Redux İçin Örnek Kullanım

Todo from https://redux.js.org

Neden Redux Gibi Mekanizmaya İhtiyaç Var ?

Birbirinden bağımsız bileşenlerin uygulama state ve birbirleri ile etkileşimini soyutlayıp, Pure bileşenler geliştirebilmesi, uygulama bileşen bağımlılık karmaşıklığını azaltmak ve veri değişimlerindeki hataları ortadan kaldırmak için Redux benzeri State yönetim araçlarına ihtiyaç var.

  • Global: Her yerden Erişilebilen State (Okuma/Read)
  • State Değişimi Kontrollü: Store State değişimi tek yönden gerçekleşiyor Action → Dispatcher → Store şeklinde
2 Temel Nedeni

Reducer Sync İşlemler için Güvenilir Peki Async İşlemler için Güvenilir Mi ?

Async işlemler için fonksiyonların güvenilir olması için 2 soru sorulmalı

  • Pure Function Mı ?
  • Side Effect Var mı ?
non-determinism = parallel processing + mutable state(değişken durum)

Store Reducer Async İşler İçin Nasıl Pure Hale Getirebiliriz ? → Middleware

Reducer Async Aksiyonların side effectlerinden Middleware ile koruyabiliriz Bunun için kullanılan 2 tip middleware bulunur: Redux Thunk and Redux Saga.

Redux with Middleware
Foo Fetch
  • Foo verisi sunucudan istenmeden PENDING state geçirilip sonrasında veri istemesi başlatılır.
  • Sunucudan veri gelirse FULFILLED şekline dönüştürülür.
  • Sunucundan herhangi bir hata gelme durumunda ise REJECTED durumuna dönüştürülür.
  • redux-promise-middleware kullanılabilir örneğin… Burda verdiğiniz ana state kendisi sonlarına _PENDING, _FULFILLED, _REJECTED ekleyerek sizin tekrar tekrar aynı kodları yazmanızı engelleyecektir.
redux-promise-middleware

Örnek Store Oluşturma

Store Assembler
Store Klasör Yapısı
foo →const
foo → action
foo → reducers

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Redux) erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store