مذكرات سعيد
اتقرأ🔖
التدفق · فصل ٤

المنتج يتضاف للسلة

add-to-cart · mutation · entities/cart · invalidateQueries
🎯 الهدف: تمشي تدفق إضافة منتج للسلة من الزرار لحد الهيدر، من غير ما الفيتشر تستورد الصفحة.

السؤال

عندي Feature اسمها add-to-cart بتتعامل مع Product، وفي نفس الوقت محتاجة تضيفه للـ Cart. المسؤوليات تتوزع كده.

  1. Product Card: المستخدم يضغط Add to Cart.
  2. features/add-to-cart: الـ Mutation وحالات التحميل والخطأ.
  3. entities/cart: تنفيذ طلب إضافة المنتج للـ API.
  4. Backend API: حفظ العنصر في السلة وإرجاع النتيجة.
  5. React Query Cache: تعطيل استعلام السلة وإعادة جلب الداتا.
  6. Header وصفحة Cart: عرض العدد والإجمالي والعناصر الجديدة.
add-to-cart لا تحتاج استيراد cart-page أو header أو حتى product-details.

كل جزء مسؤول عن نفسه. التواصل من خلال الـ Entity والـ Query Cache.

خلّصت الفصل لما

🧠 اختبر نفسك
١) add-to-cart تستورد صفحة السلة عشان تحدّثها؟
لأ. بعد نجاح الطلب الكاش يتحدّث، والصفحة تقرأ نفس الاستعلام.
٢) مين يبعت طلب إضافة المنتج للـ API؟
entities/cart. الفيتشر تشغّل الـ Mutation.