Redux-thunk ve redux-promise arasındaki fark nedir?


93

Bildiğim ve hatalıysam beni düzelttiğim kadarıyla, redux-thunk , eşzamansız işlevi göndermemize ve eylemin kendisinde değerleri hata ayıklamamıza yardımcı olan bir ara yazılımdır , ancak yeniden uyarlama sözünü kullandığımda eşzamansız işlevler oluşturamazken kendi işlevimi uygulamadan Action olarak mekanizma, yalnızca düz nesnelerin gönderilmesine ilişkin bir istisna atar.

Bu iki paket arasındaki temel farklar nelerdir? Her iki paketi de tek sayfalık bir tepki uygulamasında kullanmanın faydası var mı yoksa redux-thunk'a bağlı kalmak yeterli mi?

Yanıtlar:


120

redux-thunk eylem yaratıcılarınızın bir işlev döndürmesine olanak tanır:

function myAction(payload){
    return function(dispatch){
        // use dispatch as you please
    }
}

redux-promise bir sözü geri vermelerine olanak tanır:

function myAction(payload){
    return new Promise(function(resolve, reject){
        resolve(someData); // redux-promise will dispatch someData
    });
}

Her iki kitaplık da, eylemi eşzamansız veya koşullu olarak göndermeniz gerektiğinde kullanışlıdır. redux-thunkayrıca bir eylem oluşturucu içinde birkaç kez gönderim yapmanıza olanak tanır. Birini, diğerini veya her ikisini birden seçmeniz tamamen ihtiyaçlarınıza / tarzınıza bağlıdır.


1
mükemmel cevap. Bir thunk'ın hafif bir vaat olarak düşünülebileceğini ekleyebilirim. Zaman uyumsuz eylemleri yönetirken zamanı normalleştirmeye yardımcı olur.
Matt Catellier

4
Sözleri kullanırsanız, eylem oluşturucularla eşzamansız / beklemeyi kullanabilirsiniz
robbie

81

Muhtemelen uygulamanızda her ikisini birden isteyecek / buna ihtiyaç duyacaksınız. Rutin vaat üreten eşzamansız görevler için yeniden düzenleme vaadi ile başlayın ve ardından karmaşıklık arttıkça Thunk'lar (veya Sagalar vb.) Eklemek için ölçeklendirin :

  • Hayat basit olduğunda ve sadece tek bir söz veren içerik oluşturucularla basit eşzamansız işler yaptığınızda redux-promise, hayatınızı iyileştirecek ve bunu hızlı ve kolay bir şekilde basitleştirecektir. (Özetle, sözlerinizi çözdüklerinde 'çözmeyi' düşünmeniz, ardından sonuçları yazmanız / göndermeniz yerine, yeniden düzenleme-söz (-middleware) tüm bu sıkıcı şeyleri sizin için halleder.)
  • Ancak şu durumlarda hayat daha karmaşık hale gelir:
    • Belki eylem yaratıcınız, indirgeyicileri ayırmak için ayrı eylemler olarak göndermek istediğiniz birkaç vaat üretmek istiyor?
    • Veya sonuçları nasıl ve nereye göndereceğinize karar vermeden önce, yönetmeniz gereken bazı karmaşık ön işleme ve koşullu mantığınız mı var?

Bu gibi durumlarda, faydası, redux-thunkeylem yaratıcınızın içindeki karmaşıklığı özetlemenize izin vermesidir .

Ancak Thunk'unuz sözler üretir ve gönderirse, her iki kitaplığı birlikte kullanmak isteyeceğinizi unutmayın :

  • Thunk, orijinal eylem (ler) i oluşturur ve bunları gönderir
  • redux-promisedaha sonra, gerekli olan kazan plakasından kaçınmak için Thunk'unuz tarafından oluşturulan bireysel vaatlerin redüktör (ler) de açılmasını ele alır. (Sen olabilir yerine birlikte, Thunks gelen her şeyi promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... ama neden olur mu?)

Kullanım durumlarındaki farkı özetlemenin başka bir basit yolu: Redux eylem döngüsünün başlangıcı ile sonu :

  • Thunks, Redux akışınızın başlangıcı içindir : karmaşık bir eylem oluşturmanız veya bazı karmaşık eylem yaratma mantığını sarmalamanız gerekiyorsa, onu bileşenlerinizden ve kesinlikle indirgeyicilerin dışında tutun.
  • redux-promiseiçindir sonunda her şey basit sözlere aşağı haşlanmış edildikten sonra, sizin akış ve sadece onları kakışıyor ve mağazada onların çözümlenmiş / reddedilen değeri saklamak istediğiniz

NOTLAR / REFS:

  • redux-promise-middlewareOrijinalin arkasındaki fikrin daha eksiksiz ve anlaşılır bir şekilde uygulanmasını buluyorum redux-promise. Aktif geliştirme aşamasındadır ve aynı zamanda güzel bir şekilde tamamlanmaktadır redux-promise-reducer.
  • Karmaşık eylemlerinizi oluşturmak / sıralamak için ek benzer ara yazılımlar vardır: çok popüler olanlardan biri redux-saga, çok benzer redux-thunk, ancak jeneratör işlevlerinin sözdizimine dayanır. Yine, muhtemelen onunla birlikte kullanırsınız redux-promise.
  • Burada thunk ve redux-promise-middleware dahil olmak üzere çeşitli eşzamansız kompozisyon seçeneklerini doğrudan karşılaştıran harika bir makale var . (TL; DR: "Redux Promise Middleware diğer seçeneklerden bazılarına göre çok önemli ölçüde klişeyi azaltıyor" ... "Sanırım Saga'yı daha karmaşık uygulamalar için (okuyun:" kullanımlar ") ve Redux Promise Middleware'i diğer her şey için seviyorum ." )
  • Birden fazla eylemi göndermeniz gerektiğini düşünebileceğiniz, ancak gerçekten yapmadığınız ve basit şeyleri basit tutabileceğiniz önemli bir durum olduğunu unutmayın. Eşzamansız çağrınıza birden fazla indirgeyicinin tepki vermesini istediğiniz yer burasıdır. Ancak, birden çok azaltıcının tek bir eylem türünü izleyememesinin hiçbir nedeni yoktur. Ekibinizin bu kuralı kullandığınızı bildiğinden emin olmak istersiniz, böylece belirli bir eylemi yalnızca tek bir indirgeyicinin (ilgili bir adla) gerçekleştirebileceğini varsaymazlar.

5
Harika açıklama! kütüphane sayısı sadece akıllara durgunluk veriyor. :)
AnBisw

22

Tam açıklama: Redux geliştirme konusunda nispeten yeniyim ve bu soruyla kendim mücadele ettim. Bulduğum en kısa cevabı başka kelimelerle ifade edeceğim:

ReduxPromise, bir eylem gönderildiğinde yük olarak bir söz verir ve ardından ReduxPromise ara yazılımı, bu sözü çözmek ve sonucu düşürücüye iletmek için çalışır.

Öte yandan ReduxThunk, eylem yaratıcısını, gönderim çağrılana kadar eylem nesnesini redüktörlere göndermeye zorlar.

Bu bilgiyi bulduğum eğiticinin bağlantısı: https://blog.tighten.co/react-101-part-4-firebase .


5
... bir çeşit . Bunlar, kullanılan gerçek kalıpların ... bir tür ... yan etkileri. ReduxPromise ayrıca yük olarak bir söz vermez. ReduxPromise , bir taahhüt söz konusu olduğunda gönderdiğiniz tüm eylemleri yönetir .
XML
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.