Redux'un Flux'ın daha iyi bir "uygulaması" olduğunu veya daha doğrusu bir şeyleri basitleştirmek için yeniden tasarlandığını (uygulama durumu yönetimi) söylediğini biliyorum.
Reaktif programlama (RxJS) hakkında çok şey duydum, ancak henüz öğrenmek için dalmadım.
Öyleyse sorum şu: Bu iki teknoloji arasında herhangi bir kesişme (ortak bir şey) var mı yoksa birbirlerini tamamlayıcılar mı? ... yoksa tamamen farklı mı?
Yanıtlar:
Kısacası, çok farklı amaçlar için çok farklı kütüphaneler, ama evet bazı belirsiz benzerlikler var.
Redux, uygulama boyunca durumu yönetmek için bir araçtır. Genellikle kullanıcı arayüzleri için mimari olarak kullanılır. Angular'ın (yarısı) bir alternatifi olarak düşünün.
RxJS, reaktif bir programlama kitaplığıdır. Genellikle JavaScript'te eşzamansız görevleri gerçekleştirmek için bir araç olarak kullanılır. Bunu Promises'e bir alternatif olarak düşünün.
Reaktif programlama, veri değişikliklerinin uzaktan gözlemlendiği bir paradigmadır (çalışma ve düşünme şekli) . Veriler uzaktan değiştirilmez .
İşte uzaktan değişimin bir örneği :
// In the controller.js file
model.set('name', 'George');Model değiştirilir Denetleyicisi'nden.
İşte uzaktan gözlemlenen bir örnek :
// logger.js
store.subscribe(function (data) {
console.log(data);
});Logger'da, Store'da (uzaktan) meydana gelen veri değişikliklerini gözlemliyor ve konsola yazıyoruz.
Redux, Reaktif paradigmasını biraz kullanır: Mağaza reaktiftir. İçeriğini belli bir mesafeden ayarlamazsınız. Bu yüzden store.set()Redux'da yok . Mağaza, eylemleri uzaktan gözlemler ve kendini değiştirir. Ve Mağaza, başkalarının verilerini uzaktan gözlemlemesine izin verir.
RxJS ayrıca Reaktif paradigmayı da kullanır, ancak bir mimari olmak yerine, bu "uzaktan gözlemleme" modelini gerçekleştirmeniz için size temel yapı taşları olan Gözlemlenebilirler verir .
Sonuç olarak, farklı amaçlar için çok farklı şeyler, ancak bazı fikirleri paylaşın.
Çok farklı şeylerdir.
RxJS, Reaktif Programlama yapmak için kullanılabilir ve 250'den fazla operatör içeren çok kapsamlı bir kitaplıktır.
Ve Redux, github deposunda açıklandığı gibi "Redux, JavaScript uygulamaları için tahmin edilebilir bir durum kapsayıcısıdır".
Redux, uygulamalarda durumu ele almak için yalnızca bir araçtır. Ancak buna kıyasla, yalnızca RxJS'de tam bir uygulama oluşturabilirsiniz.
Bu yardımcı olur umarım :)
Redux , güncelleme işlemleri için iyi tanımlanmış standartlarla gelen sadece bir durum yönetimi kitaplığıdır. Standartlara bağlı kaldığınız sürece, veri akışınızı mantıklı ve mantıklı tutabilirsiniz. Ayrıca, ara yazılımlar ve mağaza geliştiricilerle veri akışını geliştirme yeteneği de getiriyor.
RxJS , reaktif programlama için bir araç setidir. Aslında uygulamanızda olan her şeyi bir akış olarak düşünebilirsiniz. RxJS, bu akışları yönetmek için çok zengin bir araç seti sunar.
RxJS ve Redux nerede kesişir? Redux'da, durumunuzu eylemlerle güncellersiniz ve açıkçası bu eylemler akışlar olarak değerlendirilebilir. Yeniden gözlemlenebilir gibi bir ara yazılım kullanarak (zorunda değilsiniz) sözde "iş mantığınızı" reaktif bir şekilde uygulayabilirsiniz. Başka bir şey de, yeniden üretme mağazanızdan, bazen bir geliştirici kullanmaktan daha kolay olabilecek bir gözlemlenebilir öğe oluşturabilmenizdir.
Kısaca söylemek gerekirse:
Redux: Durum Yönetimi için kullanılan Flux'tan ilham alan Kitaplık .
RxJS: Reaktif programlama felsefesine dayalı başka bir Javascript kitaplığıdır, "Akışlar" (Gözlemlenebilirler, vb.) [Stream kavramlarını anlamak için Reaktif Programlama hakkında okuyun].
Redux'tan ilham alan RxJS kodunu yaptığım zamandan bazı pragmatik farklılıklar eklemek istedim.
Her eylem türünü bir Konu örneğiyle eşledim. Her durum bilgili bileşenin, daha sonra bir indirgeyici işlevle eşleştirilen bir Öznesi olacaktır. Tüm indirgeyici akışlar ile birleştirilir mergeve ardından scandurum çıkarılır . Varsayılan değer ile ayarlanır startWithhemen önce scan. publishReplay(1)Eyaletler için kullandım , ancak daha sonra kaldırabilirim.
React pure render işlevi, yalnızca tüm üreticileri / Konuları göndererek olay verilerini oluşturduğunuz yerde olacaktır.
Alt bileşenleriniz varsa, bu durumların sizinkiyle nasıl birleştirildiğini açıklamanız gerekir. combineLatestbunun için iyi bir başlangıç noktası olabilir.
Uygulamada dikkate değer farklılıklar:
Ara yazılım yok, sadece rxjs operatörleri. Bence bu en büyük güç ve zayıflık. Yine de kavramları ödünç alabilirsiniz, ancak yine de başka bir özel çözüm olduğu için redux ve cycle.js gibi kardeş topluluklardan yardım almakta zorlanıyorum. Bu yüzden bu metinde "biz" yerine "ben" yazmam gerekiyor.
Eylem türleri için anahtar / durum veya dizeler yok. Eylemleri ayırmanın daha dinamik bir yoluna sahipsiniz.
rxjs başka bir yerde bir araç olarak kullanılabilir ve durum yönetimine dahil değildir.
Eylem türlerinden daha az üretici sayısı (?). Bundan emin değilim, ancak alt bileşenleri dinleyen ana bileşenlerde birçok tepkiye sahip olabilirsiniz. Bu, daha az zorunlu kod ve daha az karmaşıklık anlamına gelir.
Çözüme sahipsiniz. Çerçeve gerekmez. İyi ve kötü. Nasılsa kendi çerçevenizi yazacaksınız.
Bu çok daha fraktaldır ve bir alt ağaçtan veya uygulama durum ağacının birden çok bölümünden değişikliklere kolayca abone olabilirsiniz.
Ayrıca, alt bileşenlerin akış olarak tanımlandığı çok daha büyük faydalar üzerinde çalışıyorum. Bu, indirgeyicilerde ebeveyn ve alt durumu derlemek zorunda olmadığımız anlamına gelir, çünkü durumları bileşen yapısına dayalı olarak sadece ("sadece") özyinelemeli olarak birleştirebiliriz.
React reaktif durumları daha iyi ele alıncaya kadar tepki vermeyi atlamayı ve snabbdom veya başka bir şeyle devam etmeyi düşünüyorum. Durumumuzu neden tekrar sahne ile parçalamak için yukarı doğru inşa etmeliyiz? Bu yüzden Snabbdom ile bu kalıbın 2. versiyonunu yapmaya çalışacağım.
Burada, state.ts dosyasının durum akışını oluşturduğu daha gelişmiş ancak küçük bir snippet var. Bu, doğrulama kuralları ve css stilleri ile alanların (girişlerin) bir nesnesini alan ajax-form bileşeninin durumudur. Bu dosyada, tüm çocukların durumlarını form durumunda birleştirmek için alan adlarını (nesne anahtarları) kullanıyoruz.
export default function create({
Observable,
ajaxInputs
}) {
const fieldStreams = Object.keys(ajaxInputs)
.map(function onMap(fieldName) {
return ajaxInputs[fieldName].state.stream
.map(function onMap(stateData) {
return {stateData, fieldName}
})
})
const stateStream = Observable.combineLatest(...fieldStreams)
.map(function onMap(fieldStreamDataArray) {
return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) {
acc[fieldStreamData.fieldName] = fieldStreamData.stateData
return acc
}, {})
})
return {
stream: stateStream
}
}Kod tek başına pek bir şey ifade etmese de, durumu nasıl yukarı doğru inşa edebileceğinizi ve dinamik olayları kolaylıkla nasıl üretebileceğinizi gösterir. Ödenecek bedel, farklı bir kod stili anlamanız gerektiğidir. Ve bu bedeli ödemeyi seviyorum.