اتصل بنا

الدليل الكامل لإستخدام React مع Redux

Giuseppe Avagliano

أغسطس 02, 2021 - 2021 - 6 دقائق للقراءة

تحذير: بعض أجزاء المحتوى مترجمة تلقائياً وقد لا تكون دقيقة تماماً.

React هي مكتبة جافا سكريبت تم تطويرها من قبل فيسبوك يمكن استخدامها لبناء واجهات المستخدم. يمكن استخدام React في بناء واجهات مستخدم معقدة وسريعة الاستجابة، ولكن لها أيضًا الكثير من الفوائد لتطوير تطبيقات الويب.

من ناحية أخرى، فإن Redux هو إطار عمل جافا سكريبت أنشأه دان أبراموف في عام 2015 يساعد المطورين على إدارة السلوك غير المتزامن لتطبيقاتهم.

سنتعرف في هذه المقالة على ما هي وكيفية استخدام React مع Redux وما هي فوائد استخدامها.

1. ما هو React و React Native؟

رد الفعل هي مكتبة JavaScript تركز على بناء واجهات المستخدم. تُستخدم للعرض من جانب العميل ولها بنية قائمة على المكونات. أما React Native، من ناحية أخرى، فهي إطار عمل لبناء تطبيقات جوال أصلية عبر المنصات باستخدام React.

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

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

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

2. لماذا تعتبر React أفضل من الأطر الأخرى

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

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

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

ReactvsAngular 1024x728 1

3. كيف يمكنني البدء باستخدام React.js؟

React.js هي مكتبة جافا سكريبت يمكن استخدامها لتطوير الواجهة الأمامية.

توفر React بديلاً لنمط MVC، بدلاً من التعامل مع طريقة العرض كمكون واحد من مكونات التطبيق. ثم يتم ربط المكونات عن طريق ربط بيانات خفيف الوزن لتشكيل تطبيق واحد متماسك: لهذا السبب، تعد React مكتبة جافا سكريبت الأكثر استخدامًا لبناء تطبيقات الصفحة الواحدة في عام 2021.

للبدء في استخدام React، تحتاج أولًا إلى معرفة HTML و CSS، وهما اللغتان اللتان بُنيت عليهما.
من الضروري أيضًا معرفة صيغ JavaScript و ES6 إذا كنت تريد استخدام React في الإنتاج.

4. ما هو Redux ومكتبة إدارة الحالة؟

Redux هي مكتبة شائعة لإدارة الحالة لتطبيقات JavaScript. تُستخدم لتنفيذ نمط التدفق الذي أنشأته فيسبوك.
تمنح Redux المطورين الذين لديهم مكتبات تشبه React البنية التي يحتاجونها لإدارة البيانات والحفاظ على حالة التطبيق. يتيح ذلك للمطورين كتابة شيفرة يسهل اختبارها وتصحيحها وإعادة استخدامها في سياقات مختلفة.
Redux هي مكتبة تساعد المطورين في الحفاظ على الحالة والتعامل مع التغييرات بكفاءة.
يحتوي على ثلاثة مبادئ رئيسية:

  • تُخزَّن حالة التطبيق في شجرة كائنات واحدة، والتي تخزِّن جميع البيانات اللازمة لتصيير واجهة المستخدم.
  • يتم إعادة عرض واجهة المستخدم بالكامل عند كل تغيير في الحالة.
  • يتم التعامل مع التغييرات على الكائنات بواسطة دالة نقية تسمى المخفض
شعار روميكس أفقي 1024 × 512 1

5. كيف تساعد ريداكس المطورين على بناء تطبيقات أفضل

Redux هي مكتبة JavaScript مصممة في الأصل لإدارة البيانات في تطبيقات الصفحة الواحدة. اكتسبت المكتبة شعبية هائلة لأنها تساعد المطورين على إدارة تعقيدات عملية تطوير الواجهة الأمامية.

يسمح Redux للمبرمجين بتجنب المشاكل الشائعة مثل الحالات القابلة للتغيير المشتركة والتعليمات البرمجية الفوضوية. كما أنها تبسط عملية تصحيح الأخطاء البرمجية، مما يسهل على المطورين فهم ما يحدث في التطبيق من خلال تتبع جميع التغييرات التي تم إجراؤها على بيانات النظام.
يمكن أن يؤدي الاستخدام الخاطئ لـ Redux إلى الحصول على تطبيق غير منظم إلى حد كبير.
بعض البدائل الأخرى لـ Redux هي: MobX، أو Apollo.js، أو Recoil، أو استخدام خطافات مخصصة أصلية مع السياقات.

6. ما هي فوائد استخدام React مع Redux؟

Redux هي حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript. تساعد المطورين على كتابة شيفرة برمجية أكثر قابلية للفهم والصيانة والاختبار.

غالبًا ما يوصف Redux بأنه "حاوية الحالة" لتطبيقات React. React نفسها هي مجرد مكتبة لبناء واجهات المستخدم ولكن يمكن استخدام Redux مع أي طبقة عرض أخرى مثل Angular أو Vue.js.

فوائد Redux هي:

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

كما ترى، هناك الكثير من الفوائد لاستخدام التفاعل مع الاسترجاع.

7. إنشاء حاويات لمكوناتك باستخدام Redux

Redux سهلة التعلم، وقوية جدًا ويمكن استخدامها مع أي مكتبة عرض. لقد أصبح المعيار الفعلي لبناء تطبيقات React.

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

إنشاء مكوناتك مع

8. مكوِّنات React مقابل مكوِّنات ريدوكس

عندما تقوم بتطوير تطبيق باستخدام تفاعل مع Redux، عليك أن تفهم أن الفرق الرئيسي بين مكونات React وRedux هو أن مكونات React تعتمد فقط على البيانات من المكون الأم بينما مكونات Redux تهتم بالبيانات من المكون الأم وكذلك المكونات الأخرى في النظام.
نتيجة لذلك، من الأسهل بكثير التفكير في كيفية ظهور التخطيط عند استخدام مكوّن React.

9. إجراءات ومخفضات Redux مقابل مكونات React

Redux هي مكتبة راسخة من المكونات التي تستخدمها React عندما يتعلق الأمر بالتعامل مع الحالة.

مخزن Redx هو مخزن البيانات الذي يخزن جميع المعلومات المتعلقة بالتطبيق. يتم إرسال الإجراءات لتغيير الحالة، وتُستخدم المخفّضات لإجراء التغييرات استجابةً للإجراءات.

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

10. إعداد مخفضات في واجهة التطبيق لتحديث حالات المكونات

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

الخاتمة

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

Giuseppe Avagliano

جوزيبي خبير تسويق يتمتع بخبرة 10 سنوات من الخبرة في شركات الإعلام الدولية والتجارة الإلكترونية. وهو شغوف بكل ما يتعلق بالتكنولوجيا، بدءًا من الإعلانات والهواتف الذكية وأجهزة الكمبيوتر والتشفير وNFTs. من المؤكد أن القهوة تجري في عروقه أكثر من الماء ولكنه لا يزال يعتقد أن الهدوء فضيلة الأقوياء.

فتح مشروط