ReactJS المتقدمة: أفضل الممارسات ل React + Redux + Sagas

القهوة للفكر

أول الأشياء أولاً ، مقدمة سريعة حول ما هو رد الفعل. إنها مكتبة JavaScript تستخدم لبناء واجهات المستخدم. لقد غير مشهد التطوير الأمامي منذ ظهوره. لذلك ، إذا كنت تتطلع إلى أن تكون مطور ويب أمامي ، فإن مكتبات التعلم مثل React أو Vue.js ضرورية تقريبًا في صناعة اليوم. إليك برنامج تعليمي رائع إذا كنت بدأت تعلم React. https://reactjs.org/tutorial/tutorial.html.

أتذكر عندما بدأت تعلم React. كنت أشعر دائمًا بالقلق من أنه لا يمكنني أبدًا تعلم كل ما أحتاج إليه ، لغة جافا سكريبت الدائمة التغير التي تلوح في الأفق ، وإذا كنت قد حصلت على شيء صحيح ، فسوف أسأل دائمًا نفسي ، هل كانت حقًا أفضل طريقة؟ للقيام بذلك؟ بعد مئات المئات من البرامج التعليمية على الإنترنت ، وعمليات البحث في Youtube ، وفناجين القهوة غير المكتملة (والأكثر غموضًا على الأرجح) ، تلقيت أخيرًا فهمًا قويًا لما يحاول React إدخاله في جدول JavaScript.

ومع ذلك ، فقد ناضلت دائمًا لإيجاد برنامج تعليمي يجمع بين جميع المفاهيم المتقدمة لرد الفعل في برنامج تعليمي واحد مضغوط.

أتذكر أيضًا أنني واجهت صعوبة في فهم هذه المفاهيم عند استخدامها داخل شفرة مصدر كبيرة. هذه هي الفجوة التي تحاول هذه المقالة سدها. الأدوات والمفاهيم المتقدمة مدمجة في تطبيقنا البسيط ، وهذا مخصص فقط للأغراض التعليمية ولا يجب عليك استخدام هذه المفاهيم إذا لم يكن تطبيقك بحاجة إليها.

بما فيه الكفاية مع شيت الدردشة. دعونا نتحدث الرمز. قم بتنزيل الكود النهائي من هذا الريبو واتبع README حتى تستطيع أن ترى وتشعر بما سنبنيه هنا. https://github.com/jelorivera08/react-starter-pack.

الصفحة المقصودة من التطبيق

أعلاه ، يمكنك رؤية حالة العد معروضة وأربعة أزرار تشغل الإجراءات الخاصة بكل منها. أفعالهم واضحة.

محددات

مباشرة إلى ملف selectors.js داخل حاوية Counter ، أول مفهوم متقدم نواجهه هنا هو createSelector. من خلال النظر إلى الكود ، أولاً ، يقوم متغير count const بجلب حالة العد داخل شجرة حالة الإعادة باستخدام state.get (‘count}).

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

بعد ذلك ، سيتم استخدام الوظيفة الناتجة داخل mapStateToProps ، ومع mapStateToProps ، بطبيعة الحال ، فإن الشيء التالي الذي يجب تهيئته هو mapDispatchToProps.

إنشاء الإجراءات

عند إرسال إجراءات المخفض ، يتعين علينا دائمًا أن نعلن عن نوعها وحالة التبديل المقابلة إلى المخفض الذي ستدخله لاحقًا من أجل تغيير حالة التطبيق. مع حزمة createActions من reduxsauce ، يمكننا ضرب عصفورين بحجر واحد. يجب علينا أيضًا تنسيق المخفض باستخدام reduxsauce من أجل الاستفادة الكاملة من هذه الحزمة.

المخفض

أعلاه هو المخفض لدينا التطبيق. الحالة الأولية محاطة بواجهة برمجة تطبيقات fromJS من غير قابلة للتغيير وكما ينطبق اسم الحزمة ، فإنه يحمي الحالة الأولية من التحور. رد الفعل صارم للغاية مع هذا المفهوم ، لذلك ضع دائمًا ذلك في الاعتبار. يحتوي createReducer API من reduxsauce على وسيطين.

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

إعادة الملحمة

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

التأخير موجود للسخرية من زمن الوصول إلى الشبكة لإضفاء شعور أفضل بكثير على التطبيق. وأخيرا ، دعونا نتأكد من أننا لا ننسى الأداء.

تقسيم الرمز

يعد تقسيم الشفرة طريقة رائعة لتحسين أداء تطبيق الويب. تأخذ شفرة JavaScript أكبر عدد من بيانات المستخدم. تذكر أنه ، مع تقسيم الشفرة ، يتيح للمستخدم النهائي تنزيل جزء الشفرة الذي يحتاجه فقط من أجل كفاءة استهلاك البيانات.

فى الختام،

هناك الكثير من الحزم والأدوات التي تساعدنا ، مهندسي البرمجيات على إنشاء رمز أكثر نظافة وكفاءة. يأتي مع التكلفة ، وتكلفة فهم النظام الأساسي وهذا هو التفكير في رد الفعل.

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

إنها الأشياء الصغيرة دائمًا.

مع ذلك ، آمل أن أكون قد ساعدتني على زيادة فهمك لرد الفعل مع هذه المقالة الصغيرة. في صحتك!