unable to add product in cart

[ShwetaVichare06]

CartScreen.js import React, { useEffect } from 'react'; import { addToCart } from '../actions/cartActions'; import { useDispatch, useSelector } from 'react-redux';

function CartScreen(props) {

const cart = useSelector(state => state.cart);

const { cartItems } = cart;

const productId = props.match.params.id; 
const qty = props.location.search? Number(props.location.search.split("=")[1]) : 1;
const dispatch = useDispatch();
useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qty));
    }
  }, []);

  return <div className="cart">
  <div className="cart-list">
    <ul className="cart-list-container">
      <li>
        <h3>
          Shopping cart
        </h3>
        <div>
          Price
        </div>
      </li>
      {
        cartItems.length ===0 ?
        <div>
          Cart is empty
        </div>
        :
        cartItems.map( item =>
          <div>
            <img src={item.image} alt="product" />
            <div className="cart-name">
              <div>
                {item.name}
              </div>
              <div>
                Qty:
                <select>
                  <option value ="1"></option>
                  <option value ="2"></option>
                  <option value ="3"></option>
                  <option value ="4"></option>
                </select>
              </div>
            </div>
            <div>
              {item.price}
            </div>
          </div>
          )
      }
    </ul>
    </div>
    <div className="cart-action">
      <h3>
      Subtotal ( {cartItems.reduce((a, c) => a + c.qty, 0)} items)
    :
     Rs {cartItems.reduce((a, c) => a + c.price * c.qty, 0)}
      </h3>
      <button className="button primary" disabled={cartItems.length === 0}>
    Proceed to Checkout
  </button>
    </div>
  </div>

} export default CartScreen;

cartReducer.js import { CART_ADD_ITEM, CART_REMOVE_ITEM, CART_SAVE_SHIPPING, CART_SAVE_PAYMENT } from "../constants/cartConstants";

function cartReducer(state = { cartItems: [] }, action) { switch (action.type) { case CART_ADD_ITEM: const item = action.payload; const product = state.cartItems.find(x => x.product === item.product); if (product) { return { cartItems: state.cartItems.map(x => x.product === product.product? item : x) }; } return {cartItems: [...state.cartItems], item}; default: return state } } export { cartReducer}

cartActions.js import Axios from "axios";

import { CART_ADD_ITEM } from "../constants/cartConstants";

const addToCart = (productId, qty) => async (dispatch) => { try { const { data } = await Axios.get("/api/products/" + productId); dispatch({ type: CART_ADD_ITEM, payload: { product: data._id, name: data.name, image: data.image, price: data.price, countInStock: data.countInStock, qty } });

} catch (error) {

}

} export { addToCart }