Currently, I am developing a shopping cart feature for my website and I would like to display the total quantity of items in the header.
I have implemented useReducer and context to manage the state of my items within the application, which is functioning correctly. However, upon page refresh, all data is lost. To address this issue, I plan to store the item quantity in localStorage.
My approach involves checking if the quantity already exists in localStorage when adding a new item to the cart. Unfortunately, I am facing an issue where the process seems to run twice, resulting in the double addition of the intended quantity.
Apologies for any grammatical errors, as English is not my first language.
import { useReducer } from "react";
import CartContext from "./cart-context";
const defaultCartState = {
items: [],
totalAmount: 0,
totalQuantity: 0,
};
const cartReducer = (state, action) => {
if (action.type === "ADD") {
const updatedTotalAmount =
state.totalAmount + action.item.price * action.item.amount;
if (JSON.parse(localStorage.getItem("quantity"))) {
state.totalQuantity = JSON.parse(localStorage.getItem("quantity"));
}
console.log(state.totalQuantity);
console.log(action.item.amount);
const updatedTotalQuantity = state.totalQuantity + action.item.amount;
const existingCartItemIndex = state.items.findIndex(
(item) => item.id === action.item.id
);
const existingCartItem = state.items[existingCartItemIndex];
let updatedItems;
if (existingCartItem) {
const updatedItem = {
...existingCartItem,
amount: existingCartItem.amount + action.item.amount,
};
updatedItems = [...state.items];
updatedItems[existingCartItemIndex] = updatedItem;
} else {
updatedItems = state.items.concat(action.item);
}
localStorage.setItem("quantity", JSON.stringify(updatedTotalQuantity));
return {
items: updatedItems,
totalAmount: updatedTotalAmount,
totalQuantity: updatedTotalQuantity,
};
}
return defaultCartState;
};
CartProvider
const CartProvider = (props) => {
const [cartState, dispatchCartAction] = useReducer(
cartReducer,
defaultCartState
);
const addItemToCartHandler = (item) => {
dispatchCartAction({ type: "ADD", item: item });
};
const removeItemFromCartHandler = (id) => {
dispatchCartAction({ type: "REMOVE", id: id });
};
const cartContext = {
items: cartState.items,
totalAmount: cartState.totalAmount,
totalQuantity: cartState.totalQuantity,
addItem: addItemToCartHandler,
removeItem: removeItemFromCartHandler,
};
return (
<CartContext.Provider value={cartContext}>
{props.children}
</CartContext.Provider>
);
};
export default CartProvider;
The issue with the process running twice can be observed in the console: Screenshot of console