अपोलो बनाम रेडक्स - डेटा के साथ प्रतिपादन

अपोलो और रेडक्स 2 लोकप्रिय पुस्तकालय हैं जिनका उपयोग रिएक्ट के साथ किया जाता है। वे विभिन्न कारणों से शामिल हैं, लेकिन मुख्य रूप से इसके लिए:
1. एक दुकान का प्रबंधन
2. सहायता डेटा संभालती है
3. अद्यतन सहारा के साथ किसी भी पुन: प्रतिपादन ट्रिगर

लेकिन ऐसा करने के लिए वे अंडर-द-हुड का क्या तंत्र का उपयोग करते हैं, और जब वे प्रॉप्स को संभालने और रेंडर करने की बात करते हैं तो वे कैसे अलग होते हैं?

मैंने जांच करने का फैसला किया और नीचे उसी का उत्पाद है।

TLDR;

अपोलो एक ऑब्जर्वेबल का उपयोग करता है और मैन्युअल रूप से रेंडर-पॉइंट पर डेटा के लिए वर्तमान ऑब्जर्वेबल को पढ़ने के लिए फिर से रेंडर करता है।

Redux एक ऑब्जर्वेबल का भी उपयोग करता है, लेकिन अपने ग्राहकों के लिए पर्यवेक्षक सूचनाओं का उपयोग करके स्थानीय स्थिति को अपडेट करता है।

observables

पहले छूने के लिए कुछ महत्वपूर्ण वेधशालाएँ हैं। वे कुछ शक्तिशाली गुणों के साथ एक नया async आदिम हैं। एक बुनियादी उदाहरण नीचे है।

  1. सदस्यता समारोह से अपने अवलोकन को बनाएं
const SubsFunction = (पर्यवेक्षक) => {
   // कुछ सामान, async हो सकता है।
   observer.next ("कुछ डेटा के साथ कॉल करें");
   observer.complete ();
   वापसी () => कंसोल.लॉग ("सदस्यता समाप्त करना")
}
const ourObservable = new Observable (SubsFunction);

2. अपने अवलोकन के लिए सदस्यता लें। यह सबस्क्राइब करेगा।

const सब्सक्राइबर = ourObservable.subscribe ({
   अगला (x) {कंसोल.लॉग (x)}, // "कुछ डेटा के साथ कॉल करें"
   त्रुटि (ग़लती) {कंसोल.लॉग ("प्राप्त समाप्ति त्रुटि
   अनुक्रम। ")},
   पूरा () {कंसोल.लॉग ("स्ट्रीम सफलतापूर्वक पूरा हो गया है।")}
});
subscriber.unsubscribe (); // "सदस्यता समाप्त करना"

मूल रूप से हम वस्तुओं के बीच 1 से कई संबंधों को परिभाषित कर सकते हैं। जब राज्य माता-पिता के लिए बदलते हैं, तो उसके आश्रितों (पर्यवेक्षकों) को सूचित और अद्यतन किया जाता है।

उनके पास आलसी होने, रद्द करने सहित कई शक्तिशाली गुण हैं और एक क्रम में कई बार चल सकते हैं।

आज एक युक्ति-संगत तरीके से उनका उपयोग करने के लिए ज़ेन-अवलोकन योग्य देखें।

चलो अपोलो के साथ शुरू करते हैं

अपोलो एक ऑब्जर्वबल्स सदस्यता समारोह के अंदर भ्रूण का उपयोग करता है (हाल ही में मैंने यहां किया था एक हाल ही में अपोलो के आंतरिक पर पूर्ण विवरण प्राप्त करें)। ऑब्जर्वेबल सामान्यीकृत डेटा के लिए एक स्टोर के रूप में भी कार्य करता है।

HTTP अनुरोध से प्रतिक्रिया मिलने पर स्टोर अपडेट हो जाता है और फिर एक "forceRender ()" चालू हो जाता है (किसी दिए गए घटक के अंदर पुन: रेंडर को मैन्युअल रूप से ट्रिगर करने के लिए प्रतिक्रिया विधि)।

अंतिम रूप से "प्रोप पैटर्न प्रस्तुत करना" का उपयोग करते हुए, बच्चों को वर्तमान अवलोकन से डेटा के साथ प्रदान किया जाता है। यह देखते हुए कि रिएक्ट राज्य का उपयोग यहाँ बिल्कुल नहीं किया गया है।

मूल क्वेरी घटक के साथ पृष्ठ-लोड पर घटनाओं के टूटने के लिए नीचे देखें।

अपोलो के साथ पेज-लोड की पूरी शारीरिक रचना

अब Redux पर

Redux के साथ हम वास्तविक HTTP लाने वाले तंत्र को अनदेखा करेंगे (या तो थ्रक्स या सागा का उपयोग किया जाता है) और स्टोर अपडेट और घटक री-रेंडरर्स पर ध्यान केंद्रित करें।

जब एक घटक "कनेक्ट ()" होता है, तो इसे स्टोर ऑब्जर्वेबल के लिए ग्राहकों की सूची में जोड़ दिया जाता है (यहां Redux Store वेधशाला पर अधिक)।
जब कोई रिड्यूसर स्टोर में स्थिति बदलता है, तो सभी ग्राहकों को सूचित किया जाता है और एक "सेटस्टेट ()" चलाया जाता है।

परिणाम जुड़ा हुआ घटक है और इसके बच्चों को अद्यतन सहारा के साथ फिर से प्रदान किया जाता है।

Redux के कनेक्ट का एक सरलीकृत संस्करण नीचे है:

क्लास कनेक्ट का विस्तार
     trySubscribe () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (यह))
        this.handleChange ()
     }
     घटकडिमाउंट () {
       this.trySubscribe ()
     }
     संभाल () {
       const storeState = this.store.getState ()
       const prevStoreState = this.state.storeState
       // तर्क का उपयोग स्टोर और प्रतिक्रिया राज्य
       // यदि स्टोर स्थिति बदल गई है, तो प्रतिक्रिया स्थिति को अपडेट करें
       it.setState ({storeState})
     }
}

सारांश

मुझे यह आकर्षक लगता है कि दोनों पुस्तकालय वेधशालाओं का उपयोग करते हैं, भले ही वे विभिन्न तंत्रों के साथ इसका उपयोग करते हैं।

मुझे लगता है कि और कुछ नहीं तो यह दर्शाता है कि जावास्क्रिप्ट के भविष्य में वे किस तरह की भूमिका निभाएंगे। वे वर्तमान में आधिकारिक प्रस्ताव के चरण 1 में हैं (यहां tc39 पर पूर्ण विवरण), इसलिए जल्द ही उतरने की उम्मीद है। तालिका में वे जिस तरह की शक्ति लाते हैं उसे देखते हुए (समस्याओं का समाधान जो कि वादे कभी-कभी नहीं होते हैं) यह प्रतीत होता है कि परिदृश्यों की एक अच्छी संख्या है जो उनके लिए अच्छी तरह से अनुकूल होगी।

जंगल में उनके जैसे काम करने के उदाहरण पढ़ना, जैसे कि Redux और Apollo में, उनके बारे में अधिक जानने का एक शानदार तरीका है।

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

यदि आपको यह पसंद आया है तो कृपया एक ताली बजाएं। वैकल्पिक रूप से मुझे बताएं कि क्या आपके पास कोई विचार या प्रतिक्रिया है। धन्यवाद :)