شرح منطق مكون React وتوضيح وظيفة ميثود Object.assign و Promise.all

أولا فلنشرح الدوال:

Promise.all()

هي دالة تأخذ مصفوفة من الوعود (Promises) وتنتظر أن تكتمل كلها. ثم ترجع مصفوفة تحتوي على نتائجها بنفس الترتيب.

Object.assign() 

هو دالة لدمج الكائنات في كائن واحد.

results = [
  { smartphones: [...] },
  { laptops: [...] },
  ...
]

بعد استخدام Object.assign()  سوف يكون كالتالي:

{
  smartphones: [...],
  laptops: [...],
  ...
}

لاحظ انه تم دمج جميع الكائنات.

فلنشرح الشيفرة:

أولا لدينا معلومات أولية تحتوي على المعلومات الخاصة بانواع المنتجات categoryData وهي مصفوفة.

ثم لدينا حالة product state وهو الكائن التي سيحتوي على البيانات التي سوف نأخذها من الواجهة البرمجية API وقيمته الاولية كائن فارغ.

عملنا useEffect ولهذا لانه نريد أن نجلب البيانات وعادة عند جلب البيانات نستخدمها وهي تستخدم لانها سوف تنفذ مرة واحدة فقط عند جلب البيانات وهكذا نستعمل useEffect .

لدينا دالة fetchPrduct

مهمتها اخذ البيانات من ال API وتم استخدام map مع Promise.all لأنه لدينا اكثر من منتج وكل منتج نريد ان نأخذ معلوماته يتطلب طلب API خاص فيه.

فلذلك اخذنا أسماء المنتجات وعملنا عليها mapping مما اخذنا اسم كل منتج منفصلا وعملنا عليه طلب API ووظيفة all هنا انها سوف ترجع المعلومات لنا واحدة تلو الأخرى.

ومن ثم في Object.assign()  دمجنا كل الكائنات المحتوية على المعلومات المرادة في كائن واحد ومن ثم:

setProduct(productsData);

عينا قيمة الكائن الذي سيحتوي على  البيانات بالكائن الذي دمجناه أي يعني المعلومات المرادة.

ومن ثم طبعنا الناتج.

ذلك مكون في مشروع React باسم Home، والغرض منه هو عند  تحميل المكون لأول مرة، يقوم بجلب بيانات المنتجات من API خارجي لعدة فئات مختلفة.

 والفئات التي يتم جلبها هي:

const categoryData = [
  "smartphones",
  "mobile-accessories",
  "laptops",
  "tablets",
  "sunglasses",
  "sports-accessories",
]

وذلك عن طريق المرور على المصفوفة categoryData من خلال دالة map:

    const fetchPrduct = async () => {
    try{
      const results = await Promise.all(
        categoryData.map(async (category) => {
         const response = await fetch(`https://dummyjson.com/products/category/${category}`);
         const data = await response.json();

         return {[category] : data.products}
        })
      )

Promise.all هنا هو لجلب البيانات لجميع الفئات بشكل متوازٍ في نفس الوقت، حيث دالة all تنتظر حتى يتم إكمال جميع الـ Promises في المصفوفة بنجاح وتسمح بتنفيذ عدة عمليات غير متزامنة مثل طلبات API في نفس الوقت بشكل متوازٍ، بدلاً من انتظار انتهاء كل طلب لبدء الطلب الذي يليه.

ثم جمع كل تلك البيانات في كائن  واحد، هنا:

         return {[category] : data.products}

لاحظ [category] سيتم استبدالها باسم الفئة الحالية التي في دورة map، ففي جافاسكريبت تستطيع تعيين أسماء الخواص ديناميكيًا في الكائنات بتلك الطريقة.

ويخزن الكائن المجمع في حالة أي State المكون ليتم استخدامه لاحقًا، سواء لعرض المنتجات على الصفحة أو غيره.

     const productsData = Object.assign({}, ...results);
      setProduct(productsData);

و Object.assign دالة لنسخ خصائص كائن أو عدة كائنات إلى كائن آخر، وهنا تم تحديد كائن فارغ {  } ليتم نسخ إليه محتوى مصفوفة results والتي بها كائنات، لاحظ ...results تستخدم الـ Spread Operator لتفكيك المصفوفة.

ما فائدة دمج الكائنات في كائن واحد؟

وأذا لم ادمجهم ماذا سيحدث

دمج الكائنات سيجعلهم قابل للوصول بشكل اسرع ويجعل الكود اكثر نظافة مما يسهل علينا القرائة فالكائنات المتداخلة صعبة الفهم وقد يصبح سلوك غير متوقع في كودنا بسبب عدم معرفة كيفية الوصول للكائن.