Redux >> أنا اقوم بعمل cart لمتجر واريد انه عندما اضيف منتج موجود فى الكارت .. بدلا من اضافته فى خانة جديدة يقوم التطبيق بزيادة الكمية +1 بدلا من انشاؤه فى خانة جديدة

يمكنك أن تقوم بإنشاء ملف تقوم بتسميته cart.utils.js و نقوم بإنشاء هذه الدالة فيه.

فكرة عمل هذه الدالة هي كما يلي:

• نقوم بالبحث عن ال cart item الذي نريد إضافته في المصفوفة الخاصة بال cartItems، و ذلك عن طريق التابع find 
• بعدها إذا كان ال cart item الذي نريد إضافته موجود في المصفوفة الخاصة بال cartItems، سنقوم بالدوران على عناصر ال cartItems حتى نصل إلى العنصر الذي نريد تعديل كميته/إضافته و سنقوم بتعديل الكائن الخاص به و زيادة الكمية بواحد
• و بعدها سنقوم بإعادة مصفوفة تحتوي ال cartItems القديمة و ال cart item mالجديد (الذي نريد زيادة كميته أو الذي نريد إضافته-لم-يكن-موجود-مسبقًا)

export const addItemToCart = (cartItems, cartItemToAdd) => {
  
  const existingCartItem = cartItems.find(
    cartItem => cartItem.id === cartItemToAdd.id
  );

  if (existingCartItem) {
    return cartItems.map(cartItem =>
      cartItem.id === cartItemToAdd.id
        ? { ...cartItem, quantity: cartItem.quantity + 1 }
        : cartItem
    );
  }

  return [...cartItems, { ...cartItemToAdd, quantity: 1 }];
};

الآن في الملف reducer سنقوم باستيراد الدالة السابقة و استخدامها كما يلي:

import {ADD_TO_CART, REMOVE_FROM_CART, CLEAR_CART} from '../constants';
import { addItemToCart } from './cart.utils';


const initialState = {
  cartItems: [],
  totalPrice: 0,
};

const cartItems = (state = initialState, action: any) => {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        cartItems: addItemToCart(state.cartItems, action.payload),
        totalPrice: state.totalPrice + action.payload.price,
      };
    case REMOVE_FROM_CART:
      return {
        ...state,
        cartItems: state.cartItems.filter(
          cartItem => cartItem !== action.payload,
        ),
        totalPrice: state.totalPrice - action.payload.price,
      };
    case CLEAR_CART:
      return {...initialState};
  }
  return state;
};

export default cartItems;