ما هي وظيفة mapDispatchToProps؟

mapDispatchToProps هي مُعامل اختياري في دالة connect() في مكتبة React Redux. تسمح لك بتحديد كيفية ربط مُنشئي الإجراءات (action creators) مع خصائص المُكوّن (component props). بمعنى آخر، تُحدد mapDispatchToProps كيفية قيام المُكوّن بتفعيل تغييرات الحالة في متجر Redux.

يمكن أن تكون mapDispatchToProps كائنًا (object) أو دالة (function).

عندما تكون mapDispatchToProps كائنًا:

يمثل كل خاصية في الكائن مُنشئ إجراء. سيستخدم React Redux تلقائيًا bindActionCreators() لربط كل مُنشئ إجراء مع دالة dispatch()، ثم تمريرها كخصائص إلى المُكوّن. مثال:

const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' }),
  decrement: () => ({ type: 'DECREMENT' })
};

في هذا المثال، سيتلقى المُكوّن خاصيتين: increment و decrement. عند استدعاء this.props.increment()، سيتم إرسال الإجراء { type: 'INCREMENT' } إلى المتجر.

عندما تكون mapDispatchToProps دالة:

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

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    incrementByAmount: (amount) => dispatch({ type: 'INCREMENT_BY_AMOUNT', payload: amount })
  };
};

بهذه الطريقة، يمكنك التحكم الكامل في إرسال الإجراءات. على سبيل المثال، يسمح لك incrementByAmount بإرسال إجراء مع حمولة (payload) (قيمة إضافية).

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

إذا لم تستخدم mapDispatchToProps، سيتلقى المُكوّن dispatch كخاصية. ومع ذلك، فإن استخدام mapDispatchToProps يجعل التعليمات البرمجية أسهل في القراءة والصيانة، خاصةً عندما يكون لديك العديد من مُنشئي الإجراءات. كما يُساعدك على الاستفادة القصوى من ميزة bindActionCreators لتحسين الأداء.