Hi, I’m trying to create remove item logic with redux. I basically tried to adapt the logic from the Favorite Recipes example, but I’m getting not a fucntion error when running the code. How can I achieve this?
export const addItem = (itemToAdd) => {
return {
type: 'cart/addItem',
payload: itemToAdd,
};
};
export const removeItem = (itemToRemove) => {
return {
type: 'cart/removeItem',
payload: itemToRemove
};
};
export const changeItemQuantity = (name, newQuantity ) => {
return {
type: 'cart/changeItemQuantity',
payload: {
name,
newQuantity
}
}
}
const initialCart = {};
export const cartReducer = (cart = initialCart, action) => {
switch (action.type) {
case 'cart/addItem': {
const { name, price, img, type } = action.payload;
// if the item already exists, increase the quantity by 1, otherwise set it to 1
const quantity = cart[name] ? cart[name].quantity + 1 : 1;
const newItem = { price, img, type, quantity };
// Add the new item to the cart (or replace it if it existed already)
return {
...cart,
[name]: newItem
};
}
case 'cart/removeItem':
return cart.filter(item => item.id !== action.payload.id)
case 'cart/changeItemQuantity': {
const { name, newQuantity } = action.payload;
const itemToUpdate = cart[name];
const updatedItem = {
...itemToUpdate,
quantity: newQuantity
}
// Create a copy of itemToUpdate and update the quantity prop.
return {
...cart,
[name]: updatedItem
}
// Return a copy of the cart with the updatedItem included.
return {};
}
default: {
return cart;
}
}
};
import React from 'react';
import "./Cart.css";
import Navbar from './Navbar.jsx';
import { useDispatch, useSelector } from 'react-redux';
import { changeItemQuantity } from '../features/cart/cartSlice.js';
import { calculateTotal } from '../features/utilities/utilities.js';
import { removeItem } from '../features/cart/cartSlice.js';
export default function Cart() {
const dispatch = useDispatch();
const cart = useSelector(state => state.cart); // * Note
const onInputChangeHandler = (name, input) => {
// If the user enters a bad value...
if (input === '') {
return;
}
// Otherwise, convert the input into a number and pass it along as the newQuantity.
const newQuantity = Number(input);
dispatch(changeItemQuantity(name, newQuantity));
};
const onClickHandler = (item) => {
dispatch(removeItem(item));
};
// Use the cart and currencyFilter slices to render their data.
const cartElements = Object.entries(cart).map(createCartItem);
const total = calculateTotal(cart);
return (
<>
<Navbar/>
<div id="cart-container">
<ul id="cart-items">
{cartElements == '' ? <div className="cart-empty">Your cart is empty</div> : cartElements}
</ul>
<h3 className="total">
Total{' '}
<span className="total-value">
{total}
</span>
</h3>
</div>
</>
);
function createCartItem([name, item]) {
if (item.quantity === 0) {
return;
}
return (
<li className="cart-list" key={name}>
<img src={item.img}/>
<p>{name}</p>
<p>{item.type}</p>
<div className="quantity-container">
<p>Quantity:</p>
<input
type="number"
className="item-quantity"
name="quantity"
value={item.quantity}
onChange={(e) => {
onInputChangeHandler(name, e.target.value);
}}/>
</div>
<button
onClick={() => onClickHandler(item)}
className="addToCart"
>
Remove
</button>
</li>
);
}
};
agreed