كيفية توصيل React بـ Redux - دليل تخطيطي

يستهدف هذا المنشور الأشخاص الذين يعرفون بالفعل React و Redux. سيساعدهم هذا في فهم أفضل لكيفية عمل الأشياء تحت الغطاء. عندما دخلت عالم React لأول مرة؟ ، منذ حوالي 3 سنوات ، واجهت صعوبة بالغة في فهم كيفية عمل m apStateToProps و m لـ Redux apDispatchToProps وكانت متاحة لمكون React. فيما يلي دليل تخطيطي لفهم كيفية عمل Redux onnect مع React بشكل أفضل.

لنفترض أن لدينا Searchمكونًا.

ومتجر Redux كلاسيكي.

دعونا تعبئة مخزن مسترجع مع Actionالمرسلون و Reducerالدولة.

المخفض defaultStateيبدو هكذا . تأتي actionالمعلمة داخل Reducerالوظيفة من المرسلAction.

دعنا نربط مكون بحث React بمتجر Redux. تحتوي مكتبة React-Redux على روابط رسمية لـ React لـ Redux.

يوفر connectوظيفة توصيل المكون بالمتجر.

mapDispatchToPropsيعني تعيين dispatchوظيفة الإجراء إلى مكونات React this.props.

الأمر نفسه ينطبق على mapStateToPropsالمكان الذي يتم فيه تعيين حالة المخفض إلى مكون React this.props.

  1. قم بتوصيل React بـ Redux.
  2. و mapStateToPropsو mapDispatchToPropsيتناول مخزن مسترجع عام stateو dispatch، على التوالي.
  3. المخفض stateوالإجراء dispatchمتاحان عبر this.propsمكون React.

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

  1. انقر فوق submitالزر الموجود في مكون بحث React
  2. و clickظيفة توفد إلى العمل. dispatchيتم توصيل وظيفة الإجراء بمكون البحث عبر mapDispatchToPropsويتم إتاحتها لـthis.props
  3. (خارج نطاق هذا المنشور) الإجراء المرسل مسؤول عن fetchالبيانات وإرسال إجراء آخر لتحديث حالة Reducer
  4. تقوم حالة Reducer بتحديث نفسها ببيانات البحث الجديدة المتوفرة من الخطوة 3.
  5. حالة المخفض متصلة بالفعل this.propsفي مكون البحث عبرmapStateToProps
  6. this.props أحدث بيانات البحث ويتم إعادة عرض العرض الآن لإظهار نتائج البحث المحدثة