Redux-Thunk और Redux-वादा में क्या अंतर है?


92

जहां तक ​​मुझे पता है और मुझे सही किया है तो मैं गलत हूं, redux-thunk एक मिडलवेयर है जो हमें कार्रवाई में async फ़ंक्शन और डिबग मान को भेजने में मदद करता है, जबकि जब मैं redux-वादा करता था तो मैं खुद को लागू किए बिना async फ़ंक्शन नहीं बना सकता था कार्रवाई के रूप में तंत्र केवल सादे वस्तुओं को भेजने का एक अपवाद फेंकता है।

इन दो पैकेजों के बीच प्रमुख अंतर क्या है? क्या एक ही पृष्ठ प्रतिक्रिया ऐप में दोनों पैकेजों का उपयोग करने या रिडक्स-थंक से चिपके रहने का कोई लाभ पर्याप्त होगा?

जवाबों:


119

redux-thunk अपने एक्शन क्रिएटर्स को फंक्शन लौटाने की अनुमति देता है:

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

redux-promise उन्हें एक वादा वापस करने की अनुमति देता है:

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

यदि आपको कार्रवाई async या सशर्त रूप से भेजने की आवश्यकता है, तो दोनों लाइब्रेरी उपयोगी हैं। redux-thunkआपको एक एक्शन निर्माता के भीतर कई बार प्रेषण करने की अनुमति देता है। चाहे आप एक को चुनते हैं, दूसरे को या दोनों पूरी तरह से आपकी जरूरतों / शैली पर निर्भर करते हैं।


1
बहुत बढ़िया जवाब। मैं जोड़ सकता हूं कि एक ठग को एक हल्के वादे के रूप में सोचा जा सकता है। यह समय को सामान्य करने में मदद करता है जब async क्रियाओं को प्रबंधित करता है।
मैट कैटेलियर

4
यदि आप वादों का उपयोग करते हैं, तो आप एस्कॉन / वेट का उपयोग एक्शन क्रिएटर्स के साथ कर सकते हैं
रॉबी

79

आप अपने ऐप में दोनों को एक साथ रखना / चाहेंगे। नियमित रूप से वादा करने वाले async कार्यों के लिए Redux-वादा के साथ शुरू करें और फिर जटिल वृद्धि के रूप में Thunks (या Sagas, आदि) जोड़ने के लिए पैमाने पर करें :

  • जब जीवन सरल होता है, और आप रचनाकारों के साथ मूल async काम कर रहे होते हैं जो एक भी वादा वापस करते हैं, तो redux-promiseअपने जीवन को बेहतर बनाएंगे और इसे सरल, त्वरित और आसान बनाएंगे। (संक्षेप में, जब आप अपने वादों को हल करने के बारे में सोचने की ज़रूरत नहीं समझते हैं, तब वे परिणामों को लिखते / भेजते हैं, Redux-वादा (-middleware) आपके लिए उन सभी उबाऊ सामानों की देखभाल करता है।)
  • लेकिन, जब जीवन और अधिक जटिल हो जाता है:
    • हो सकता है कि आपका एक्शन निर्माता कई वादों का उत्पादन करना चाहता है, जिसे आप अलग-अलग रीड्यूसर को अलग-अलग कार्यों के रूप में भेजना चाहते हैं?
    • या, आपके पास कुछ जटिल प्री-प्रोसेसिंग और सशर्त तर्क हैं जिन्हें प्रबंधित करने से पहले, यह तय करने से पहले कि कैसे और कहां से परिणाम भेजना है?

उन मामलों में, इसका लाभ redux-thunkयह है कि यह आपको अपने एक्शन-क्रिएटर के अंदर जटिलता को घेरने की अनुमति देता है

लेकिन ध्यान दें कि यदि आपका थंक वादों का उत्पादन और प्रेषण करता है, तो आप दोनों पुस्तकालयों का एक साथ उपयोग करना चाहेंगे :

  • थंक मूल कार्रवाई की रचना करेगा और उन्हें भेजेगा
  • redux-promiseफिर अपने थंक द्वारा उत्पन्न व्यक्तिगत वादा (ओं) को reducer (ओं) पर उतार-चढ़ाव को संभालना होगा, जो कि बॉयलरप्लेट से बचने के लिए मजबूर करता है। (आप इसके बजाय थ्रक्स में सब कुछ कर सकते हैं , promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... लेकिन आप क्यों करेंगे?)

उपयोग-मामलों में अंतर को सम्‍मिलित करने का एक और सरल तरीका है: Redux एक्शन चक्र की शुरुआत बनाम अंत :

  • थ्रेड्स आपके Redux प्रवाह की शुरुआत के लिए होते हैं : यदि आपको एक जटिल क्रिया बनाने की आवश्यकता है, या कुछ गार्नली एक्शन-क्रिएशन लॉजिक को एनकैप्सुलेट करना है, तो इसे अपने कंपोनेंट्स से बाहर रखना और निश्चित रूप से रिड्यूसर से बाहर करना।
  • redux-promiseआपके प्रवाह के अंत के लिए है , एक बार सब कुछ सरल वादों के लिए उबला हुआ है, और आप बस उन्हें खोलना चाहते हैं और स्टोर में उनके हल / अस्वीकृत मूल्य को स्टोर करना चाहते हैं

नोट / refs:

  • मुझे redux-promise-middlewareमूल के पीछे के विचार का अधिक पूर्ण और समझने योग्य कार्यान्वयन प्रतीत होता है redux-promise। यह सक्रिय विकास के अधीन है, और अच्छी तरह से पूरक भी है redux-promise-reducer
  • आपके जटिल कार्यों की रचना / अनुक्रमण के लिए अतिरिक्त समान मिडवेअर उपलब्ध हैं: एक बहुत लोकप्रिय है redux-saga, जो कि बहुत समान है redux-thunk, लेकिन जनरेटर के कार्यों के सिंटैक्स पर आधारित है। फिर, आप संभवतः इसके साथ संयोजन के रूप में उपयोग करेंगे redux-promise
  • यहाँ एक है महान लेख सीधे thunk और redux-वादा-मिडलवेयर सहित विभिन्न async रचना विकल्प, की तुलना। (टीएल; डीआर: "Redux प्रॉमिस मिडलवेयर बॉयलरप्लेट को बहुत नाटकीय रूप से कुछ अन्य विकल्पों के मुकाबले कम कर देता है" ... "मुझे लगता है कि मैं सागा को अधिक जटिल अनुप्रयोगों के लिए पसंद करता हूं (पढ़ें:" उपयोग करता है "), और रेडक्स प्रॉमिस मिडलवेयर सब कुछ के लिए।" )
  • ध्यान दें कि एक महत्वपूर्ण मामला है जहां आप सोच सकते हैं कि आपको कई कार्यों को भेजने की आवश्यकता है, लेकिन आप वास्तव में नहीं करते हैं, और आप साधारण चीजों को सरल रख सकते हैं। यही वह जगह है जहाँ आप बस चाहते हैं कि आपके async कॉल पर प्रतिक्रिया करें। लेकिन, इस बात का कोई कारण नहीं है कि कई रिड्यूसर एकल कार्रवाई प्रकार की निगरानी क्यों नहीं कर सकते। आप बस यह सुनिश्चित करना चाहते हैं कि आपकी टीम को पता है कि आप उस सम्मेलन का उपयोग कर रहे हैं, इसलिए वे केवल एक ही reducer नहीं मानते हैं (संबंधित नाम के साथ) किसी दिए गए कार्य को संभाल सकते हैं।

4
महान व्याख्या! पुस्तकालयों की सरासर संख्या सिर्फ दिमाग उबलने वाली है। :)
AnBisw

22

पूर्ण प्रकटीकरण: मैं Redux विकास के लिए अपेक्षाकृत नया हूं और इस प्रश्न से खुद जूझ रहा हूं। मैं सबसे रसीला जवाब दूंगा जो मुझे मिला:

ReduxPromise पेलोड के रूप में एक वादा लौटाता है जब एक कार्रवाई को भेजा जाता है, और फिर ReduxPromise मिडलवेयर उस वादे को हल करने और रिड्यूसर को परिणाम पारित करने के लिए काम करता है।

दूसरी ओर, ReduxThunk, एक्शन क्रिएटर को मजबूर करता है कि वह वास्तव में एक्शन ऑब्जेक्ट को रिड्यूसर्स के पास भेजने तक रोक दे।

यहाँ ट्यूटोरियल के लिए एक लिंक है जहाँ मुझे यह जानकारी मिली: https://blog.tighten.co/react-101-part-4-firebase


5
... की तरह । उन तरह के हैं ... साइड-इफेक्ट्स ... इस्तेमाल किए गए वास्तविक पैटर्न के। ReduxPromise भी पेलोड के रूप में एक वादा वापस नहीं करता है। ReduxPromise संभालती है किसी भी कार्रवाई आप प्रेषण कि जहां एक वादा है पेलोड।
एक्सएमएल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.