أبولو مقابل Redux - تقديم مع البيانات

Apollo و Redux هما مكتبات شعبية تستخدم مع React. يتم تضمينها لأسباب مختلفة ، ولكن أساسا ل:
1. إدارة المتجر
2. المساعدة في جلب البيانات جلب
3. تحريك أي إعادة تقديم مع الدعائم المحدثة

ولكن ما هي الآليات التي يستخدمونها تحت الغطاء للقيام بذلك ، وكيف تختلف عندما يتعلق الأمر بالتعامل مع الدعائم والتقديم؟

قررت التحقيق وأدناه هو نتاج ذلك.

TLDR.

يستخدم Apollo Observable ويفرض إعادة تقديم يدويًا ، ويقرأ Observable الحالي للبيانات في نقطة التقديم.

يستخدم Redux "ملاحظة" أيضًا ، لكن يقوم بتحديث الحالة المحلية لمشتركيها باستخدام إعلامات المراقبة.

المتغيرات الظاهرة

الشيء المهم أن نتطرق إليه أولاً هو الملاحظات فهي بدائية جديدة غير متزامن مع بعض الخصائص القوية. مثال أساسي هو أدناه.

  1. إنشاء ملاحظتك من وظيفة الاشتراك
const subscriptionFunction = (observer) => {
   / / القيام ببعض الأشياء ، يمكن أن يكون غير متزامن.
   observer.next ("Call with some data")؛
   observer.complete ()؛
   return () => console.log ("إلغاء الاشتراك")
}
const ourObservable = جديد يمكن ملاحظته (subscriptionFunction) ؛

2. اشترك في ملاحظتك. هذا سوف استدعاء subscriptionFunction.

المشترك المشترك = ourObservable.subscribe ({
   التالي (x) {console.log (x)} ، // "Call with some data"
   خطأ (err) {console.log ("تم استلام خطأ إنهاء لل
   التسلسل. ")} ،
   Complete () {console.log ("اكتمل البث بنجاح.")}
})؛
subscriber.unsubscribe ()؛ // "إلغاء الاشتراك"

بشكل أساسي ، يمكننا تحديد علاقة رأس بأطراف بين الكائنات. عندما تتغير الحالة بالنسبة إلى الوالد الذي يمكن ملاحظته ، يتم إعلام وتحديث المعالين (المراقبين)

لديهم العديد من الخصائص القوية بما في ذلك كسول ، يمكن إلغاؤها ويمكن تشغيلها عدة مرات على التوالي.

تحقق من زن يمكن ملاحظتها للاستفادة منها بطريقة متوافقة مع المواصفات اليوم.

لنبدأ مع أبولو

تستخدم Apollo ميزة الجلب داخل وظيفة اشتراك Observables (يمكنك العثور على التفاصيل الكاملة حول الأجزاء الداخلية لـ Apollo في حديث حديث قمت به هنا). يعمل Observable أيضًا كمخزن للبيانات الطبيعية.

عند تلقي الاستجابة من طلب HTTP ، يتم تحديث المتجر ومن ثم يتم تشغيل "forceRender ()" (طريقة Reacts لتشغيل إعادة تقديم يدويًا داخل مكون معين).

أخيرًا باستخدام "نموذج تقديم التجسيد" ، يتم تقديم بيانات للاطفال خارج الملاحظة الحالية. تجدر الإشارة إلى أن حالة React لم يتم استخدامها على الإطلاق هنا.

انظر أدناه للحصول على تفاصيل الأحداث على صفحة التحميل مع مكون الاستعلام الأساسي.

تشريح كامل لتحميل صفحة مع أبولو

الآن على الإعادة

مع Redux ، سنتجاهل آلية جلب HTTP الفعلي (على افتراض استخدام thunks أو sagas لهذا الغرض) والتركيز على تحديثات المتجر وإعادة تقديم المكونات.

عندما "يربط ()" أحد المكونات ، تتم إضافته إلى قائمة المشتركين في Store Observable (المزيد على Redux Store Observable هنا).
عندما يتغير المخفض الحالة في المتجر ، يتم إخطار جميع المشتركين وتشغيل "setState ()".

والنتيجة هي المكون المتصل وأطفاله يعاد تقديمهم مع الدعائم المحدثة.

فيما يلي نسخة مبسطة من خدمة Redux connect:

فئة الاتصال يمتد المكون {
     trySubscribe () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (هذا))
        this.handleChange ()
     }
     componentDidMount () {
       this.trySubscribe ()
     }
     التعامل مع التغيير() {
       متجر constState = this.store.getState ()
       const prevStoreState = this.state.storeState
       // المنطق باستخدام متجر ورد الفعل الدولة
       // إذا تغيرت حالة المتجر ، فقم بتحديث حالة رد الفعل
       this.setState ({storeState})
     }
}

ملخص

أجد أنه من المذهل أن تستفيد كلتا المكتبتين من "الملاحظات" على الرغم من أنها تستخدمها مع آليات مختلفة.

أعتقد أنه إذا لم يكن هناك شيء آخر ، فإنه يدل على نوع الدور الذي ستلعبه الملاحظات في مستقبل جافا سكريبت. إنها في المرحلة الأولى من الاقتراح الرسمي حاليًا (التفاصيل الكاملة في tc39 هنا) ، لذلك نأمل أن تهبط قريبًا. بالنظر إلى نوع القوة التي يجلبونها إلى المائدة (لا يمكن أحيانًا حل المشكلات التي يعدها "الوعود التيارات") ، يبدو أن هناك عددًا كبيرًا من السيناريوهات التي ستكون مناسبة لهم.

تعد قراءة أمثلة عملية عنهم في البرية ، مثل تلك الموجودة في Redux و Apollo ، طريقة رائعة لمعرفة المزيد عنها.

بعد ذلك ، أود دراسة إيجابيات وسلبيات هذه الأساليب ومحاولة توضيح سبب اختيار هذه المكتبات للنهج الذي اتبعوه.

إذا كنت تحب هذا يرجى تجنيب التصفيق. بدلاً من ذلك ، اسمحوا لي أن أعرف إذا كان لديك أي أفكار أو ملاحظات. شكر :)