Redux'u neden Facebook Flux üzerinden kullanıyorsunuz? [kapalı]

Bu yanıtı okudum , kaynatma plakasını azalttım , birkaç GitHub örneğine baktım ve hatta redux'u biraz denedim (yapılacak uygulamalar).

Anladığım kadarıyla, resmi redux motivasyonları geleneksel MVC mimarilerine kıyasla profesyonellere katkıda bulunuyor . AMA soruya cevap vermez:

Redux'u neden Facebook Flux üzerinden kullanmalısınız?

Bu sadece programlama stilleri ile ilgili bir soru mu: fonksiyonel mi fonksiyonel değil mi? Yoksa soru redux yaklaşımından sonra gelen yetenekler / dev-araçlarda mı? Belki ölçeklendirme? Yoksa test mi?

Redux'un işlevsel dillerden gelen insanlar için bir akı olduğunu söylesem haklı mıyım?

Bu soruyu cevaplamak için uygulama redux'un akı ve redux üzerindeki motivasyon noktalarının karmaşıklığını karşılaştırabilirsiniz.

İşte resmi redux doktor motivasyonlarından motivasyon noktaları :

1. İyimser güncellemeleri ele almak ( anladığım kadarıyla, 5. noktaya bağlı değil. Facebook flux'ta uygulamak zor mu? )
2. Sunucuda oluşturma ( facebook flux da bunu yapabilir. Redux ile karşılaştırıldığında herhangi bir faydası var mı? )
3. Rota geçişleri gerçekleştirmeden önce veri getiriliyor ( Neden facebook flux'ta elde edilemiyor? Avantajları nelerdir? )
4. Sıcak yeniden yükleme ( React Hot Reload ile mümkündür . Neden redux'a ihtiyacımız var? )
5. Geri Al / Yinele işlevi
6. Başka nokta var mı? Devam eden devlet gibi ...

Redux yazarı burada!

Redux değil o Flux farklıdır. Genel olarak aynı mimariye sahiptir, ancak Redux, Flux'un geri arama kaydını kullandığı fonksiyonel kompozisyonu kullanarak bazı karmaşıklık köşelerini kesebilir.

Redux'da temel bir fark yoktur, ancak Flux'ta uygulanması zor veya imkansız olan belirli soyutlamaları kolaylaştırmayı veya en azından uygulamayı mümkün kıldığını düşünüyorum.

Redüktör Bileşimi

Örneğin, sayfalandırmayı ele alalım. Benim Akı + Router örnek Tepki kolları sayfa numaralarını ama bunun için kod korkunç. Korkunç olmasının nedenlerinden biri, Flux'un mağazalar arasında işlevselliği yeniden kullanmayı doğallaştırmamasıdır. İki mağazanın farklı eylemlere yanıt olarak sayfalandırmayı ele alması gerekiyorsa, ortak bir temel mağazadan miras almaları gerekir (kötü! Kalıtım kullandığınızda kendinizi belirli bir tasarıma kilitlersiniz) veya harici olarak tanımlanmış bir işlevi bir şekilde Flux mağazasının özel durumunda çalışması gereken olay işleyicisi. Her şey dağınık (kesinlikle mümkün olmasına rağmen).

Öte yandan Redux paginasyonu ile redüktör bileşimi sayesinde doğaldır. Düşürücüler tamamen aşağı, böylece sayfalama azaltıcıları üreten bir redüktör fabrikası yazabilir ve ardından redüktör ağacınızda kullanabilirsiniz . Neden bu kadar kolay olmasının anahtarı , Flux'ta mağazaların düz olması, ancak Redux'da, indirgeyiciler, React bileşenlerinin yuvalanabileceği gibi fonksiyonel bileşim yoluyla iç içe yerleştirilebilir.

Bu model ayrıca kullanıcı kodu geri alma / yineleme gibi harika özelliklere de olanak tanır . Geri Al / Yinele'yi iki satır kodlu bir Flux uygulamasına takmayı hayal edebiliyor musunuz? Zorlukla. Redux ile, redüktör kompozisyon modeli sayesinde tekrar kazanılır. Bu konuda yeni bir şey olmadığını vurgulamalıyım - bu, Elm Mimarisinde , Flux'tan etkilenen öncü ve ayrıntılı olarak açıklanan model .

Sunucu Oluşturma

İnsanlar Flux ile sunucuda iyi işlemektedir, ancak her biri sunucu işlemeyi daha kolay hale getirmeye çalışan 20 Flux kütüphanesine sahip olduğumuzu görünce, belki Flux'un sunucuda bazı kaba kenarları vardır. Gerçek şu ki, Facebook çok fazla sunucu oluşturma işlemi yapmıyor, bu yüzden bu konuda çok endişe etmediler ve daha kolay hale getirmek için ekosisteme güveniyorlar.

Geleneksel Flux'ta mağazalar tek tonludur. Bu, sunucudaki farklı istekler için verileri ayırmanın zor olduğu anlamına gelir. İmkansız değil, zor. Bu nedenle, çoğu Flux kütüphanesi (ve yeni Flux Utils ) artık tek tektonlar yerine sınıflar kullanmanızı önerir, böylece istek başına depoları başlatabilirsiniz.

Flux'ta çözmeniz gereken aşağıdaki sorunlar hala var (kendiniz veya Flummox veya Alt gibi en sevdiğiniz Flux kütüphanesinin yardımıyla ):

• Mağazalar sınıfsa, istek başına dağıtıcı ile nasıl oluşturabilir ve yok edebilirim? Mağazalara ne zaman kayıt olurum?
• Mağazalardaki verileri nasıl hidratlayabilir ve daha sonra istemcide rehidrate edebilirim? Bunun için özel yöntemler uygulamam gerekir mi?

Kuşkusuz Flux çerçevelerinin (vanilya Flux değil) bu sorunlara çözümleri var, ancak onları aşırı karmaşık buluyorum. Örneğin, şaşırtmak uygulamak ister serialize()ve deserialize()mağazalarınızda . Alt takeSnapshot(), durumunuzu bir JSON ağacında otomatik olarak serileştirerek bu güzelliği çözer .

Redux daha da ileri gidiyor: sadece bir mağaza (birçok redüktör tarafından yönetiliyor) olduğundan, (yeniden) hidrasyonu yönetmek için herhangi bir özel API'ye ihtiyacınız yok. Mağazaları “yıkamanıza” veya “nemlendirmenize” gerek yoktur; yalnızca tek bir mağaza vardır ve mevcut durumunu okuyabilir veya yeni bir durumla yeni bir mağaza oluşturabilirsiniz. Her istek ayrı bir mağaza örneği alır. Redux ile sunucu oluşturma hakkında daha fazla bilgi edinin.

Yine, bu hem Flux hem de Redux'da mümkün olan bir şey örneğidir, ancak Flux kütüphaneleri bu sorunu bir ton API ve konvansiyon getirerek çözmektedir ve Redux bunu çözmek zorunda bile değildir, çünkü kavramsal sadelik sayesinde birincilik.

Geliştirici Deneyimi

Aslında Redux'u popüler bir Flux kütüphanesi olmaya niyet etmedim - ReactEurope konuşmamda zaman yolculuğu ile sıcak yeniden yükleme konusundaki çalışmamı yazdım . Bir ana hedefim vardı: redüktör kodunu anında değiştirmeyi, hatta eylemleri geçerek "geçmişi değiştirmeyi" mümkün kıl ve devletin yeniden hesaplandığını gör.

Bunu yapabilen tek bir Flux kütüphanesi görmedim. React Hot Loader da bunu yapmanıza izin vermez - aslında Flux depolarını düzenlerseniz kırılır, çünkü onlarla ne yapacağını bilmez.

Redux'un redüktör kodunu yeniden yüklemesi gerektiğinde, arar replaceReducer()ve uygulama yeni kodla çalışır. Flux'ta, veriler ve işlevler Flux depolarına dolanır, bu nedenle “sadece işlevleri değiştiremezsiniz”. Dahası, yeni sürümleri bir şekilde Dispatcher'a yeniden kaydettirmeniz gerekir - Redux'un sahip olmadığı bir şey.

Ekosistem

Redux, zengin ve hızlı büyüyen bir ekosisteme sahiptir . Bunun nedeni, ara katman yazılımı gibi birkaç uzantı noktası sağlamasıdır . Bu gibi kullanım durumları ile tasarlanmış günlük , destek Promises , gözlenebilirlerin , yönlendirme , değişmezlik dev kontrolleri , sebat akılda, vb. Bunların hepsi yararlı olmayacak, ancak birlikte çalışmak için kolayca birleştirilebilecek bir dizi araca erişime sahip olmak güzel.

Basitlik

Redux, Flux'un (eylemlerin kaydedilmesi ve yeniden oynatılması, tek yönlü veri akışı, bağımlı mutasyonlar) tüm avantajlarını korur ve Dispatcher ve mağaza kaydı eklemeden yeni faydalar (kolay geri alma, sıcak yeniden yükleme) ekler.

Basit tutmak önemlidir, çünkü daha yüksek seviyeli soyutlamalar uygularken sizi aklı başında tutar.

Çoğu Flux kütüphanesinin aksine, Redux API yüzeyi çok küçüktür. Geliştirici uyarılarını, yorumları ve akıl sağlığı kontrollerini kaldırırsanız, bu 99 satırdır . Hata ayıklamak için zor bir zaman uyumsuz kod yok.

Aslında bunu okuyabilir ve tüm Redux'ları anlayabilirsiniz.

Ayrıca , Flux'a kıyasla Redux kullanmanın olumsuz yönlerindeki cevabımı da görün .

Quora'da biri şöyle diyor :

Her şeyden önce, Flux olmadan React ile uygulamalar yazmak tamamen mümkündür.

Ayrıca , her ikisinin de hızlı bir görünümünü göstermek için oluşturduğum bu görsel diyagram , muhtemelen tüm açıklamayı okumak istemeyen insanlar için hızlı bir cevap:

Ama hala daha fazla bilgi edinmek istiyorsanız, okumaya devam edin.

Saf Tepki ile başlayıp Redux ve Flux'u öğrenmeniz gerektiğine inanıyorum. React ile bazı GERÇEK deneyimler edindikten sonra, Redux'un sizin için yararlı olup olmadığını göreceksiniz.

Belki Redux'un tam olarak uygulamanız için olduğunu hissedersiniz ve belki de Redux'un gerçekten yaşamadığınız bir sorunu çözmeye çalıştığını öğreneceksiniz.

Doğrudan Redux ile başlarsanız, aşırı mühendislik kodu, bakımı daha zor ve daha fazla hata ile ve Redux olmadan daha fazla kod alabilirsiniz.

Gönderen Redux docs :

Motivasyon
Tek sayfalık JavaScript uygulamaları için gereksinimler gittikçe daha karmaşık hale geldiğinden, kodumuz her zamankinden daha fazla durumu yönetmelidir. Bu durum, sunucu yanıtlarını ve önbelleğe alınmış verileri ve ayrıca henüz sunucuda kalıcı olarak bulunmayan yerel olarak oluşturulmuş verileri içerebilir. Aktif rotaları, seçili sekmeleri, eğiricileri, sayfalama kontrollerini vb. Yönetmemiz gerektiğinden, kullanıcı arayüzü durumu karmaşıklıkta da artmaktadır.

Bu sürekli değişen durumu yönetmek zor. Bir model başka bir modeli güncelleyebiliyorsa, görünüm başka bir modeli güncelleyen bir modeli güncelleyebilir ve bu da başka bir görünümün güncellenmesine neden olabilir. Bir noktada, durumunun ne zaman, neden ve nasıl olduğu üzerinde kontrolü kaybettiğiniz için uygulamanızda neler olduğunu artık anlayamazsınız. Bir sistem opak ve deterministik olmadığında, hataları yeniden oluşturmak veya yeni özellikler eklemek zordur.

Bu yeterince kötü değilmiş gibi, yeni gereksinimlerin ön uç ürün geliştirmede yaygınlaştığını düşünün. Geliştiriciler olarak, rota geçişleri gerçekleştirmeden önce iyimser güncellemeler, sunucu tarafı oluşturma, veri alma ve benzeri işlemleri yapmamız bekleniyor. Kendimizi daha önce hiç uğraşmamamız gereken bir karmaşıklığı yönetmeye çalışırken buluyoruz ve kaçınılmaz olarak şu soruyu soruyoruz: Vazgeçme zamanı geldi mi? Cevap hayır.

İnsan zihninin akıl yürütmesi için çok zor olan iki kavramı karıştırdığımız için bu karmaşıklığın üstesinden gelmek zordur: mutasyon ve asenkroniklik. Onlara Mentos ve Kola diyorum. Her ikisi de ayrıldığında harika olabilir, ancak birlikte bir karmaşa yaratırlar. React gibi kütüphaneler, bu sorunu görünüm katmanında hem eşzamansızlığı hem de doğrudan DOM manipülasyonunu kaldırarak çözmeye çalışır. Ancak, verilerinizin durumunu yönetmek size bırakılmıştır. İşte bu noktada Redux devreye giriyor.

Flux, CQRS ve Event Sourcing'in adımlarını takip eden Redux, güncellemelerin nasıl ve ne zaman olabileceği konusunda belirli kısıtlamalar uygulayarak durum mutasyonlarını öngörülebilir hale getirmeye çalışır. Bu kısıtlamalar Redux'un üç prensibine de yansımaktadır.

Ayrıca Redux belgelerinden :

Temel Kavramlar
Redux'un kendisi çok basittir.

Uygulamanızın durumunun düz bir nesne olarak tanımlandığını düşünün. Örneğin, bir todo uygulamasının durumu şöyle görünebilir:

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Bu nesne, ayarlayıcı olmaması dışında bir "model" gibidir. Bu, kodun farklı bölümlerinin durumu keyfi olarak değiştirememesi ve çoğaltılması zor hatalara neden olmasıdır.

Eyaletteki bir şeyi değiştirmek için bir işlem göndermeniz gerekir. Bir eylem, ne olduğunu açıklayan düz bir JavaScript nesnesidir (nasıl sihir getirmediğimize dikkat edin?). İşte birkaç örnek eylem:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Her değişikliğin bir eylem olarak tanımlanmasını zorunlu kılmak, uygulamada neler olup bittiğini net bir şekilde anlamamızı sağlar. Bir şey değiştiyse, neden değiştiğini biliyoruz. Eylemler, olan bitenin kırıntıları gibidir. Son olarak, durumu ve eylemleri birbirine bağlamak için, redüktör adı verilen bir fonksiyon yazıyoruz. Yine, bu konuda sihirli bir şey yok - sadece durumu ve eylemi argümanlar olarak alan ve uygulamanın bir sonraki durumunu döndüren bir işlev. Büyük bir uygulama için böyle bir işlev yazmak zor olurdu, bu yüzden devletin parçalarını yöneten daha küçük işlevler yazıyoruz:

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

Ve bu iki redüktörü karşılık gelen durum anahtarları için çağırarak uygulamamızın tüm durumunu yöneten başka bir redüktör yazıyoruz:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

Bu temelde Redux fikrinin tamamıdır. Herhangi bir Redux API'sı kullanmadığımızı unutmayın. Bu modeli kolaylaştırmak için birkaç yardımcı programla birlikte gelir, ancak ana fikir, eylem nesnelerine yanıt olarak durumunuzun zamanla nasıl güncellendiğini açıklamanızdır ve yazdığınız kodun% 90'ı sadece Redux kullanmadan düz JavaScript'tir. kendisi, API'ları veya herhangi bir sihir.

Dan Abramov'un bu yazıyı okumaya en iyisi olabilir; burada Flux'un çeşitli uygulamalarını ve redux yazdığı sırada yaptıkları işlemleri tartışır: Akı Çerçevelerinin Evrimi

İkincisi, bağlandığınız motivasyonlar sayfası Redux'un motivasyonlarını Flux (ve React) arkasındaki motivasyonlar kadar tartışmıyor. Üç İlkeleri hala standart Akı mimarlıktan uygulama farklılıkları ile uğraşmaz gerçi daha Redux özeldir.

Temel olarak, Flux'un bileşenlerle UI / API etkileşimlerine yanıt olarak durum değişikliğini hesaplayan ve bu değişiklikleri bileşenlerin abone olabileceği olaylar olarak yayınlayan birden çok deposu vardır. Redux'da, her bileşenin abone olduğu tek bir mağaza var. IMO, en azından Redux'un, veri akışını bileşenlere geri birleştirerek (veya azaltarak) veri akışını daha da basitleştirdiğini ve birleştirdiğini hisseder - oysa Flux, veri akışının diğer tarafını birleştirmeye odaklanır - view to modeli.

Erken benimseyen biriyim ve Facebook Flux kütüphanesini kullanarak orta büyüklükte tek sayfalık bir uygulama uyguladım.

Sohbete biraz geç kaldığım için, en iyi umutlarıma rağmen Facebook'un Flux uygulamalarını bir kavram kanıtı olarak gördüğünü ve hak ettiği dikkati hiçbir zaman almadığını belirteceğim.

Onunla oynamayı teşvik ediyorum, çünkü oldukça eğitici olan Flux mimarisinin iç çalışmasını daha fazla ortaya koyuyor, ancak aynı zamanda Redux gibi kütüphanelerin sağladığı pek çok fayda sağlamıyor ( küçük projeler için önemlidir, ancak büyük projeler için çok değerli olur).

İlerlemenin Redux'a geçeceğimize karar verdik ve ben de aynısını yapmanızı öneriyorum;)

İşte Redux'un Flux üzerinden basit açıklaması. Redux'un bir dağıtım programı yoktur, redüktör adı verilen saf işlevlere dayanır. Bir dağıtım programına ihtiyaç duymaz. Her eylem, tek mağazayı güncellemek için bir veya daha fazla redüktör tarafından işlenir. Veriler değiştirilemediğinden, indirgeyiciler mağazayı güncelleyen yeni bir güncellenmiş durum döndürür

Daha fazla bilgi için Flux vs Redux

Flux ile oldukça uzun ve şimdi Redux kullanarak oldukça uzun bir süre çalıştım. Dan'ın belirttiği gibi, her iki mimari de o kadar farklı değil. Mesele şu ki Redux işleri daha basit ve daha temiz hale getiriyor. Flux'un üstünde birkaç şey öğretir. Örneğin Flux, tek yönlü veri akışının mükemmel bir örneğidir. Veriler, manipülasyonlar ve görünüm katmanı ayrıldığında endişelerin ayrılması. Redux'da aynı şeyler var ama aynı zamanda değişmezlik ve saf fonksiyonlar hakkında da bilgi ediniyoruz.

2018'in ortasında (birkaç yıl) ExtJS'den geçiş yapan yeni bir tepki / redux uygulayıcısından:

Redux öğrenme eğrisini geriye doğru kaydırdıktan sonra aynı soruya sahiptim ve saf akının OP gibi daha basit olacağını düşündüm.

Yakında yukarıdaki cevaplarda belirtildiği gibi redux akı üzerinde faydalarını gördüm ve ilk uygulamamda çalışıyordum.

Kazan plakasında tekrar kavrama yaparken, diğer devlet yönetimi kütüphanelerinden birkaçını denedim , bulduğum en iyi rövanştı .

O was çok daha sezgisel sonra vanilya redux, (Ben bir kütüphane yapıyor olması gereken bir şey), ben bir kaç girişim uygulama almak başardı ben redux harcadığı zamanın% 75 dışında Demirbaş ve kesim% 90 keser hemen gidiyor.

Aynı redux takımıyla da çalışır. Bu, bazı faydaları kapsayan iyi bir makaledir .

Bu nedenle "basit redux" araması bu SO post gelen herkes için, ben tüm faydaları ve kazan plakası 1/4 ile redux için basit bir alternatif olarak denemenizi öneririz.

Bu makaleye göre: https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

Redb'i değil, daha iyi performans elde etmek için uygulamanızdaki verileri yönetmek için MobX'i kullanmanız daha iyi olur.