🚀 أصبحت CloudSek أول شركة للأمن السيبراني من أصل هندي تتلقى استثمارات منها ولاية أمريكية صندوق
اقرأ المزيد
إلى الخلف
مدينة الحندية
كيفية الترحيل التدريجي إلى مجموعة أدوات Redux
كيفية الترحيل التدريجي إلى مجموعة أدوات Redux
February 17, 2021
7
دقيقة
[vc_row] [vc_column] [vc_column_text] Redux هو حل شائع لإدارة حالة التطبيق؛ مكتبة مفتوحة المصدر يمكن دمجها مع أطر الواجهة الأمامية مثل React و Angular. يتيح لنا Redux بمفرده تحقيق الحالة العالمية للتطبيق.
React هي مكتبة واجهة مستخدم أخرى مفتوحة المصدر تسمح لك بإنشاء واجهات مستخدم تفاعلية. لا توفر React في حد ذاتها واجهة برمجة تطبيقات مفيدة لإدارة الحالة العالمية (على الرغم من معالجة هذه المشكلة في أحدث إصداراتها باستخدام واجهة برمجة تطبيقات السياق، لا يزال معظم المطورين يفضلون Redux). يتيح لك الجمع بين React و Redux كتابة تطبيقات قابلة للتطوير باستخدام قواعد رموز قابلة للصيانة. ومع ذلك، لإضافة ميزات ثانوية، يتطلب Redux عددًا كبيرًا من أسطر الرموز.
لتقليل الرموز المعيارية وتسهيل الوظائف الأسهل، أصدر فريق Redux مجموعة أدوات Redux. باستخدام مجموعة أدوات Redux، لا تحتاج إلى إعادة كتابة التعليمات البرمجية الحالية. نظرًا لأنه يحتوي على توافق مع الإصدارات السابقة، فإن الكود الحالي يعمل كما هو متوقع.
تأتي مجموعة أدوات Redux (RTK) مع Redux Thunk Middleware ولكننا نستخدم Redux Saga للإجراءات غير المتزامنة، وإدارة الآثار الجانبية للتطبيق بسهولة، وإمكانية قراءة التعليمات البرمجية بشكل أفضل، والاختبار السهل.
خطوات الترحيل إلى مجموعة أدوات Redux
إليك دليل خطوة بخطوة لمساعدتك على الترحيل
الخطوة 1
قم بتثبيت مجموعة الأدوات وإزالة الحزم الأخرى التي تأتي معها افتراضيًا.
npm i @reduxjs /مجموعة الأدوات
npm إلغاء تثبيت redux redux-devtools-ملحق redux-thunk
الخطوة 2
استبدل CreateStore بـ ConfigureStore من مجموعة الأدوات وقم بتمرير المخفض إلى وظيفة Redux ConfigureStore، والتي تقوم بعد ذلك بإرجاع كائن المتجر.
- استيراد {CreateStore} من «redux»؛
+ استيراد {ConfigureStore} من "@reduxjs /toolkit «؛
استيراد مخفض الجذر من». /مخفضات «؛
- متجر ثابت = CreateStore (مخفض الجذر)؛
+ متجر ثابت = تكوين/استعادة ({
+ المخفض: مخفض الجذر،
+})؛
لقد انتقلت الآن بنجاح إلى مجموعة أدوات Redux. علاوة على ذلك، سيتم تشغيل جميع الرموز الموجودة بالفعل كالمعتاد.
الجزء المفضل لدي من مجموعة الأدوات هو المكان الذي يمكنك فيه الآن الاستفادة من الشرائح لإعداد وظيفة المخفض لكل ميزة جديدة.
لا تحتاج إلى تعريف الإجراءات ومنشئي الإجراءات بشكل صريح. يمكنك ببساطة تحديد الحالة الأولية لمتجرك ووظائف المخفض، والتي يتم استدعاؤها بعد ذلك عند إرسال الإجراء.
فيما يلي مثال من المستندات الرسمية:
استيراد {createSlice} من '@reduxjs /مجموعة الأدوات'؛
كونستانت كاونتر سلايس = CreateSlice ({
الاسم: «عداد»،
الحالة الأولية: 0،
مخفضات: {
الزيادة: الحالة => الحالة + 1،
التخفيض: الحالة => الحالة - 1
}
})
متجر const = configureStore ({
المخفض: شريحة مضادة. مخفض
})
document.getElementByID ('الزيادة'). أضف مستمع الحدث ('انقر', () => {
store.dispatch (counterslice.actions.الزيادة ())
})
تأخذ الدالة createSlice كائنًا بثلاث وسيطات
{الاسم<string>، الحالة الأولية<any>، المخفض <object>«؛ وتقوم بإرجاع كائن يحتوي على جميع منشئي الإجراءات في مفتاح اسمه قضايا بنفس اسم الوظيفة الموجود في المخفضات. الآن، يقوم منشئو الإجراءات هؤلاء بإرجاع كائنات الإجراءات كما هو موضح أدناه:
//console.log (counterslice.actions.الزيادة ())؛
{النوع: «المعارضة/الزيادة»، الحمولة: غير محدد}//console.log (زيادة عدد ملفات counterslice.actions.4))؛
{النوع: «المعارضة/الزيادة»، الحمولة: 4}
ضع في اعتبارك أن وظيفة المخفضلا تحتاج إلى إرجاع كائن جديد في كل مرة. لذلك، يمكنك تغييره وستتعامل مجموعة أدوات Redux مع الثبات في الخلفية.
قد تضطر أحيانًا إلى الوصول إلى نوع الإجراء وحده وليس الكائن، وفي هذه الحالة يمكنك استخدام إلى السلسلة طريقة. يكون مفيدًا عند استخدام Redux saga لمشاهدة أنواع الإجراءات.
counterslice.actions.increment.to string ()؛
//عداد/زيادة
يمكن أن يساعدك اتباع هاتين الخطوتين في تسخير قوة مجموعة أدوات Redux التي تعمل مع عدد أقل من الأسطر من الرموز المعيارية ومنطق الكود المبسط والأداء الأفضل. كما أنه يجعل الاختبار وتصحيح الأخطاء أسهل، ويأتي مع ميزات مثل التوافق مع الإصدارات السابقة والحالات التي يمكن التنبؤ بها.
لمزيد من التفاصيل، يمكنك قراءة المزيد حول مجموعة أدوات Redux ووظائفها في مستندات رسمية. [/vc_column_text] [/vc_column] [/vc_row]
أديتيا تيبروال
اشترك في موارد CloudSek
احصل على أحدث أخبار الصناعة والتهديدات والموارد.
