javascript - रिएक्ट कॉन्टेक्स्ट बनाम रेक्टक्स रेडक्स, मुझे प्रत्येक का उपयोग कब करना चाहिए?




reactjs redux react-redux (5)

मेरे लिए रेडक्स का उपयोग करने का एकमात्र कारण हैं:

  • आप एक वैश्विक राज्य वस्तु चाहते हैं (विभिन्न कारणों से, जैसे डिबगबिलिटी, दृढ़ता ...)
  • आपका ऐप बड़ा होगा या बहुत बड़ा होगा, और कई डेवलपर्स को स्केल करना चाहिए: ऐसे मामले में आपको शायद एक स्तर की प्रेरण (यानी एक इवेंट सिस्टम) की आवश्यकता होती है: आप घटनाओं को आग लगाना (अतीत में) और फिर जिन लोगों को आप नहीं जानते संगठन वास्तव में उन्हें सुन सकता है

आपको शायद अपने पूरे ऐप के लिए संकेत के स्तर की आवश्यकता नहीं है, इसलिए शैलियों को मिश्रित करना और स्थानीय राज्य / संदर्भ और रेडक्स दोनों को एक ही समय में उपयोग करना ठीक है।

प्रतिक्रिया 16.3.0 जारी की गई थी और Context एपीआई अब एक प्रयोगात्मक सुविधा नहीं है। डैन अब्रामोव (रेडक्स के निर्माता) ने इसके बारे में here एक अच्छी टिप्पणी लिखी, लेकिन यह 2 साल था जब संदर्भ अभी भी एक प्रायोगिक विशेषता थी।

मेरा सवाल है, आपकी राय / अनुभव में जब मुझे रिएक्ट रेक्टक्स पर रिएक्ट कॉन्टेक्स्ट का उपयोग करना चाहिए और इसके विपरीत?


चूंकि संदर्भ अब एक प्रयोगात्मक सुविधा नहीं है और आप सीधे अपने आवेदन में संदर्भ का उपयोग कर सकते हैं और डेटा को गहराई से घोंसले वाले घटकों तक गुजरने के लिए बहुत अच्छा होगा, जिसे इसके लिए डिजाइन किया गया था।

मार्क एरिक्सन ने अपने blog में लिखा है:

यदि आप प्रोप को गुजरने से बचने के लिए केवल रेडक्स का उपयोग कर रहे हैं, तो संदर्भ रेडक्स को प्रतिस्थापित कर सकता है - लेकिन फिर आपको शायद पहले स्थान पर रेडक्स की आवश्यकता नहीं थी।

संदर्भ आपको Redux DevTools जैसे कुछ भी नहीं देता है, आपके राज्य अपडेट का पता लगाने की क्षमता, केंद्रीकृत अनुप्रयोग तर्क जोड़ने के लिए middleware , और Redux सक्षम करने वाली अन्य शक्तिशाली क्षमताओं को भी नहीं देता है।

Redux अधिक शक्तिशाली है और बड़ी संख्या में फीचर्स प्रदान करता है जो Context Api प्रदान नहीं करता है, जैसा कि @danAbramov ने उल्लेख किया है

प्रतिक्रिया Redux आंतरिक रूप से संदर्भ का उपयोग करता है लेकिन यह सार्वजनिक एपीआई में इस तथ्य का पर्दाफाश नहीं करता है। इसलिए आपको सीधे रेडक्स के माध्यम से संदर्भ का उपयोग करके अधिक सुरक्षित महसूस करना चाहिए क्योंकि यदि यह बदलता है, तो कोड अपडेट करने का बोझ रिएक्ट रेडक्स पर होगा और आप नहीं।

नवीनतम संदर्भ एपीआई का पालन करने के लिए वास्तव में इसके क्रियान्वयन को अद्यतन करने के लिए रेडक्स तक

नवीनतम संदर्भ API का उपयोग उन अनुप्रयोगों के लिए किया जा सकता है जहां आप घटक के बीच डेटा पास करने के लिए बस रेडक्स का उपयोग करेंगे, हालांकि केंद्रीय डेटा का उपयोग करने वाले एप्लिकेशन और redux-thunk या redux-saga का उपयोग करके एक्शन क्रिएटर में एपीआई अनुरोध को संभालने के लिए अभी भी रेडक्स की आवश्यकता होगी। इस रेडक्स के अलावा redux-persist जैसी अन्य लाइब्रेरीएं redux-persist जो आपको स्थानीय स्टोरेज में स्टोर डेटा को सहेजने और रीफ्रेश पर रीहाइड्रेट करने की अनुमति देती हैं, जो कि संदर्भ एपीआई अभी भी समर्थन नहीं करता है।

जैसा कि @dan_abramov ने अपने ब्लॉग में उल्लेख किया है, आपको रेडक्स की आवश्यकता नहीं हो सकती है , कि रेडक्स में उपयोगी एप्लिकेशन है

  • एक स्थानीय भंडारण के लिए स्थिति को जारी रखें और फिर बॉक्स से बाहर, उस से बूट करें।
  • सर्वर पर प्री-फिल स्टेट, इसे एचटीएमएल में क्लाइंट को भेजें, और बॉक्स से बाहर बूट करें।
  • उपयोगकर्ता क्रियाओं को क्रमबद्ध करें और स्वचालित बग रिपोर्ट के लिए, एक राज्य स्नैपशॉट के साथ उन्हें संलग्न करें, ताकि उत्पाद डेवलपर
    त्रुटियों को पुन: उत्पन्न करने के लिए उन्हें फिर से चला सकते हैं।
  • कोड लिखने के तरीके में नाटकीय परिवर्तन किए बिना सहयोगी वातावरण को कार्यान्वित करने के लिए नेटवर्क पर कार्रवाई ऑब्जेक्ट पास करें।
  • कोड को लिखे जाने के तरीके में नाटकीय परिवर्तन किए बिना पूर्ववत इतिहास बनाए रखें या आशावादी उत्परिवर्तन लागू करें।
  • विकास में राज्य के इतिहास के बीच यात्रा करें, और कोड बदलते समय कार्रवाई इतिहास से वर्तमान स्थिति का फिर से मूल्यांकन करें, एक ला टीडीडी।
  • विकास टूलिंग में पूर्ण निरीक्षण और नियंत्रण क्षमताओं को प्रदान करें ताकि उत्पाद डेवलपर उनके लिए कस्टम टूल बना सकें
    क्षुधा।
  • अधिकांश व्यावसायिक तर्कों का पुन: उपयोग करते समय वैकल्पिक यूआई प्रदान करें।

इन कई अनुप्रयोगों के साथ यह कहने के लिए बहुत जल्द है कि रेडक्स को नए संदर्भ API द्वारा प्रतिस्थापित किया जाएगा


यदि आप रेडक्स का उपयोग केवल गहरे घोंसले वाले घटकों तक प्रोप को पार करने से बचने के लिए कर रहे हैं , तो आप रेडक्स को Context API के साथ प्रतिस्थापित कर सकते हैं। यह वास्तव में इस उपयोग के मामले के लिए है।

दूसरी तरफ, यदि आप रेडक्स डेवटूल , रेडक्स अंडो , रेडक्स पर्सिस्ट , रेडक्स फॉर्म का उपयोग करके, किसी अन्य चीज के लिए रेडक्स का उपयोग कर रहे हैं (अनुमानित राज्य कंटेनर रखने, अपने घटकों के बाहर अपने ऐप के तर्क को संभालने, राज्य अपडेट इतिहास रखने, रेडक्स सागा , रेडक्स लॉगर , इत्यादि ...), फिर रेडक्स को Context एपीआई के साथ बदलने के लिए बिल्कुल कोई कारण नहीं है।

संदर्भ:


मैं एपीआई कॉल (एक्सिस का उपयोग करने) के लिए रेडक्स-थंक के साथ रेडक्स का उपयोग करना पसंद करता हूं और रेड्यूसर को प्रतिक्रिया भेजता हूं। यह साफ और समझने में आसान है।

कॉन्टेक्स्ट एपीआई प्रतिक्रिया-रेडक्स भाग के लिए बहुत विशिष्ट है कि स्टोर से रिएक्ट घटक कैसे जुड़े होते हैं। इसके लिए, प्रतिक्रिया-redux अच्छा है। लेकिन यदि आप चाहते हैं, क्योंकि संदर्भ आधिकारिक रूप से समर्थित है, तो आप प्रतिक्रिया-रेडक्स के बजाय संदर्भ API का उपयोग कर सकते हैं।

तो, प्रश्न कॉन्टेक्स्ट एपीआई बनाम प्रतिक्रिया-रेडक्स होना चाहिए, और कॉन्टेक्स्ट एपीआई बनाम रेडक्स नहीं होना चाहिए। इसके अलावा, सवाल थोड़ा राय है। चूंकि, मैं प्रतिक्रिया-रेडक्स से परिचित हूं और सभी परियोजनाओं में इसका उपयोग करता हूं, मैं इसका उपयोग जारी रखूंगा। (मेरे लिए बदलने के लिए कोई प्रोत्साहन नहीं है)।

लेकिन अगर आप आज रेडक्स सीख रहे हैं, और आपने इसे कहीं भी इस्तेमाल नहीं किया है, तो कॉन्टेक्स्ट एपीआई को एक शॉट देने और अपने कस्टम संदर्भ API कोड के साथ प्रतिक्रिया-रेडक्स को प्रतिस्थापित करने के लायक है। शायद, यह उस तरह से बहुत साफ है।

व्यक्तिगत रूप से, यह परिचितता का सवाल है। एक दूसरे को चुनने का कोई स्पष्ट कारण नहीं है क्योंकि वे बराबर हैं। और आंतरिक रूप से, प्रतिक्रिया-redux वैसे भी संदर्भ का उपयोग करता है।


यह कई तरीकों से किया जा सकता है।

  1. ऊपर बताए गए अनुसार, सरणी में सभी तत्वों को return स्टोर करने से पहले
  2. return अंदर लूप

    विधि 1

     let container =[];
        let arr = [1,2,3] //can be anything array, object 
    
        arr.forEach((val,index)=>{
          container.push(<div key={index}>
                         val
                         </div>)
            /** 
            * 1. All loop generated elements require a key 
            * 2. only one parent element can be placed in Array
            * e.g. container.push(<div key={index}>
                                        val
                                  </div>
                                  <div>
                                  this will throw error
                                  </div>  
                                )
            **/   
        });
        return (
          <div>
             <div>any things goes here</div>
             <div>{container}</div>
          </div>
        )
    

    विधि 2

       return(
         <div>
         <div>any things goes here</div>
         <div>
            {(()=>{
              let container =[];
              let arr = [1,2,3] //can be anything array, object 
              arr.forEach((val,index)=>{
                container.push(<div key={index}>
                               val
                               </div>)
                             });
                        return container;     
            })()}
    
         </div>
      </div>
    )
    




javascript reactjs redux react-redux