How to update product quantity in the Cart and delete using reducer function? reactjs redux

Question

I only know the basic concept of react-redux and trying to find an answer. I can add a product to my cart component but I can't remove it. It only give negative numbers to the total price. Also how to update the product quantity with a button? it seems it needs to be in the reducer also because I can't do it directly to the cart.jsx since the price needed to be updated along with it. I am very new to this.. hopefully i can find some answer. Thanks

Store.jsx

const StoreData = {

menClothings: [
        {   
            id: 0,
            name: 'Crew neck 1',
            price: 19.99,
            image: './asset/crew-neck-male-tshirt.png'

        },
        {
            id: 1,
            name: 'Crew neck 2',
            price: 19.99,
            image: './asset/Crew-neck-male.png'
        },
        {
            id: 2,
            name: 'Hoodie white',
            price: 39.99,
            image: './asset/hoodie-male-01.png'
        }
        
],
cart: [],
total: 0
}


const reducer=(state=StoreData,action)=> {
    if(action.type==='PURCHASE'){
        return{
            ...state,
            cart:[...state.cart,action.payLoad],
            total: state.total + parseInt(action.payLoad.price)
            
        }
     }
     if(action.type==='DELETE'){
         return{
             ...state,
             cart:state.cart.filter((i)=>i!==action.payLoad.i),
             total:state.total - action.payLoad.price
         }
     }
 
    return state;
}


const  store = createStore(reducer);

export default store;

Cart.jsx

function Cart() {
const cart = useSelector (state=>state.cart);
const total = useSelector (state=>state.total);
const dispatch = useDispatch();
const deleteHandler = (i,price)=>{
  dispatch({type:'DELETE',payLoad:{i,price}});
}

const taxPrice = (total) * 0.12;
const shippingPrice = (total) > 2000 ? 0 : 20;
const totalPrice  = (total) + taxPrice + shippingPrice;

  return (
    <div className='container-pages'>
       <h3>Cart Component</h3>
    <hr/>

    {
     cart.map((product, i)=>{
       return(
         <>
         <div key={i} onClick={()=>deleteHandler(i, product.price)} >
         <img src={product.image} height="100" className="product-image-cart" alt="product"/>
         {product.name} {product.price} </div>

         </>
       )
     })
   }

   <p>Shippingprice: {shippingPrice}</p>
   <p>Taxprice: {taxPrice}</p>

 <h1>Total:$ {totalPrice}</h1>

    </div>
  )
}

export default Cart

Men.jsx 

  const menClothings = useSelector((state) => state.menClothings);
    const purchaseClothings = (e, productid) => {
      dispatch({ type: 'PURCHASE', payLoad: menClothings[productid] });
    };

 {menClothings.map((product, i) => (   
            <div className="container-list">
            <img src={product.image} className="product-image" alt={product.name} />
            <div className="namebtn">
              <h3 className="product-name-text" key={i}>{product.name}</h3>
              <div key={i}>${product.price}</div>
              <button onClick={(e) => purchaseClothings(e, product.id)} className="addToCart">
              Add to Cart
            </button>   
            </div>
            </div>
        ))}