i am working on an ecommerce website . I am trying to delete item in my cart after a customer fills in an order .However i am finding it difficult to delete an item from the cart. Here is the file that contains an array of the cart item

const products = [
  {
    id: '0',
    name: 'Nike Slim Shirt',
    category: 'Shirts',
    image: '/img/shoes/men/luis/1.jpg',
    price: 120,
    brand: 'Nike',
    rating: 4.5,
    size: 10,
    description: 'high quality product',
  },
  {
    id: '1',
    name: 'Adidas Fit Shirt',
    category: 'Shirts',
    image: '/img/shoes/men/luis/2.jpg',
    price: 100,
    brand: 'Adidas',
    rating: 4.0,
    size: 10,
    description: 'high quality product',
  },
  {
    id: '2',
    name: 'Lacoste Free Shirt',
    category: 'Shirts',
    image: '/img/shoes/men/luis/3.jpg',
    price: 220,
    brand: 'Lacoste',
    rating: 4.8,
    size: 17,
    description: 'high quality product',
  },
  {
    id: '3',
    name: 'Nike Slim Pant',
    category: 'Pants',
    image: '/img/shoes/men/luis/4.jpg',
    price: 78,
    brand: 'Nike',
    rating: 4.5,
    size: 14,
    description: 'high quality product',
  },
  {
    id: '4',
    name: 'Puma Slim Pant',
    category: 'Pants',
    image: '/img/shoes/men/luis/5.jpg',
    price: 65,
    brand: 'Puma',
    rating: 4.5,
    size: 10,
    description: 'high quality product',
  },
  {
    id: '5',
    name: 'Adidas Fit Pant',
    category: 'Pants',
    image: '/img/shoes/men/luis/2.jpg',
    price: 139,
    brand: 'Adidas',
    rating: 4.5,
    size: 15,
    description: 'high quality product',
  },
]

export default products;

Here is my redux file

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
};

export const basketSlice = createSlice({
  name: "basket",
  initialState,
  reducers: {

    addToBasket: (state, action) => {
      state.items = [...state.items, action.payload]
    },
    removeFromBasket: (state, action) => {

      const index = state.items.findIndex(
        (basketItem) => basketItem.id === action.payload.id
      );


      let newBasket = [...state.items]

      if (index = 0) {

        newBasket.splice(index, 1)

      } else {
        console.warn(
          `Cant remove roduct (id:)`
        )
      }
      state.items = newBasket;
    },




  },
});

export const { addToBasket, removeFromBasket } = basketSlice.actions;

// Selectors - This is how we pull information from the Global store slice
export const selectItems = (state) => state.basket.items;

export default basketSlice.reducer;

here is the checkout file where i want the button remove from cart to delete the selected item .

import Image from "next/image";
import { useDispatch } from "react-redux";
import  { removeFromBasket, addToBasket }  from "../slices/basketSlice";
import products from "../product/MenShoes/MenShoes";



function CheckoutProduct({ id, image, name, price, size})

{
    const dispatch = useDispatch();
   
 
   
    const removeItemFromBasket = () => {
        // remove item from reudux
       useDispatch({id})
    };
    

    return (
        <div classNane="product">
            <Image src={image} width={400} height={400} objectFit="contain" />
            <div className="">
                <p>{name}</p>
                <p>{id}</p>
              <p>{price}</p>
                <p>{size}</p>
                <button className="button"  onClick={removeItemFromBasket}>Remove from cart</button>
            </div>
            
        </div>

    )
}


export default CheckoutProduct

CodePudding user response：

This works great in my shopping cart. I just use React.useState. It's much easier than using redux.

const [cartItems, setCartItems] = React.useState([] as CartItemType[]);

const removeItem = (product: CartItemType) => {
    const exist: any = cartItems.find((x) => x.id === product.id);
    if (exist.qty === 1) {
      setCartItems(cartItems.filter((x) => x.id !== product.id));
    } else {
      setCartItems(
        cartItems.map((x) =>
          x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
        )
      );
    }
  };

CodePudding user response：

Change your removeFromBasket like below.

removeFromBasket: (state, action) => {

      state.items = state.items.filter(
        (basketItem) => basketItem.id !== action.payload.id
      );
     
},

And there is a mistake as well. You need to call dispatch inside removeItemFromBasket instead of useDispatch.

    const removeItemFromBasket = () => {
        // remove item from reudux
       dispatch({id})
    };