شرح هذا الكود .. REDUX

بتاريخ 10 ساعات قال Ahmed Sawy:

هل product يعتبر براميتر هنا ؟؟ 

نعم product يُعتبر parameter لل action هنا.

بتاريخ 10 ساعات قال Ahmed Sawy:

ولماذا نعمل له Payload ؟؟ 

ال payload هو naming convention  عُرف مُتَّبع عند تسمية الخاصية التي تحمل البيانات الفعلية التي يحملها الكائن action الخاص ب redux.

بمعنى أبسط ال payload تحمل البيانات التي يتم تمريرها بين ال reducers الموجودة في تطبيق redux الخاص بك حتى يتم تنفيذ بعض الأكواد عليها.

مثال:

const someAction = {
  type: "Test", 
  payload: {user: "Test User", age: 25}, 
}

و ال payload يمكن أن يحتوي أي نوع من أنواع البيانات الموجودة في جافاسكريبت (مصفوفة، كائن، إلخ)

بتاريخ 10 ساعات قال Ahmed Sawy:

ولماذا لم نعمل له Payload فى السطر الاخير ؟؟

الأمر هنا يتوقف على باقي الأكواد الخاصة ب redux مثل ملف ال reducer أو ال utils. يجب أن أطلع على باقي الأكواد حتى أعرف سبب عدم استخدامها هنا.

لكن بما أنه لم يستخدم ال payload هنا فبالتأكيد هو لم يحتاج لها و لم يقُم بتنفيذ أي أكواد/عمليات منطقية عليها "أي على البيانات التي يحملها ال payload".

مرحباً @Ahmed Sawy

بعيداً عن تقنية redux فالأكواد أو الشيفرات التي أمامنا هي عبارة عن شيفرات JavaScript: تعريف متغير من نوع كائن (Object) سُمي ب actions و لتعريفه إستخدمنا الكلمة المحجوزة const ما يعني أنه لا يُمكننا إنشاء مُتغير آخر بنفس الإسم، هذا الكائن به مجموعة من الخصائص هذه الخصائص عبارة عن توابع أو دوال تم إستخدام ما يُسمى بالدوال السهمية لتعريفها كل خاصية من هذه الخصائص تُعبر عن حدث يتم عمله لسلة مُشتريات: إضافة مُنتج للسلة، تخفيض عدد عناصر منتج مُعين في السلة، إزالة مُنتج من السلة بمعنى إذا كان موجود 4 عناصر من هذا المُنتج في السلة فسيتم إزالة كافة هذه العناصر، إفراغ السلة نهائياً من كل المنتجات.

قلنا أن كل خاصية هي عبارة عن دالة سهمية هذه الأخيرة تُعتبر كغيرها من الدول التي نُعرفها في لغة JavaScript إلا أن طريقة كتابتها تأخذ منحى آخر و تم إضافتها في معايير ES6 هذا المفهوم موجود في العديد من اللغات الأخرى (أقصد الدوال السهمية) و يُمكن إعتبارها دالة عادية إلا أنها تختصر العديد من الأشياء.

لِنقل على سبيل المثال أننا نريد تعريف دالة بإستخدام JavaScript تُعيد كائن خطي يضم إسم موظف كخاصية يتم تمريره كمعامل للدالة و بالتالي سيكون بالشكل التالي:

let employee = function(employeeName) {
  return {
    name: employeeName
  };
};

نريد تحويل الدالة إلى دالة سهمية و بالتالي ستكون:

let employee = (employeeName) => {
  return {
    name: employeeName
  };
};

لاحظ أننا إستغنينا عن الكلمة المحجوزة function و عوضناها <= ، نضع المُعاملات داخل قوسين لكن في حالة مُعامل واحد يُمكننا الإستغناء عن قوسين. بما أن الدالة تحتوي على تعليمة return لكننا نُرجع كائن فيُمكننا تغيير الدالة للشكل التالي:

let employee = employeeName => ({
    name: employeeName
});

و بهذا الشكل اختصرنا الكتابة قليلاً.

نأتي لأسئلتك:

بتاريخ 3 ساعات قال Ahmed Sawy:

هل product يعتبر براميتر هنا ؟؟ 

نعم حسب ما شرحت فهو يُتعبر مُعامل أو وسيط للدالة السهمية.

بتاريخ 3 ساعات قال Ahmed Sawy:

ولماذا نعمل له Payload ؟؟ 

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

بتاريخ 3 ساعات قال Ahmed Sawy:

ولماذا لم نعمل له Payload فى السطر الاخير ؟؟

في هذه الحالة الكائن الذي تُرجعه الدالة لا يحتوي على خاصية payload لأنه ليس هناك داع لإضافة خاصية لذلك فالأمر يعتمد على حاجاتنا لهذه الخصائص في الملفات الأخرى و في هذه الحالة الدالة السهمية مُسندة إلى الخاصية clearCart و لإفراغ سلة مُشتريات نحن لسنا بحاجة لمُنتج بعينه بل نريد إفراغها من كل ما تحتويه من منتجات بغض النظر عن معرفتنا لأي منتج تحمل هذه السلة.

بالتوفيق.