Problems in "Add to Cart" using react redux-toolkit and localstorage

Question

I am adding "add to cart" feature to the eCommerce site using redux-toolkit. I am also using local storage and thunk but it is not working. Products are not added to the cart. Nothing shows on the console. What is wrong with this code?

Here is the CartSlice.js code

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

const cartItemsFromStorage = localStorage.getItem("cartItems")
  ? JSON.parse(localStorage.getItem("cartItems"))
  : [];

const initialState = {
  cartItems: cartItemsFromStorage,
};

export const cartSlice = createSlice({
  name: "cartPage",
  initialState,
  reducers: {
    addItem(state, action) {
      const item = action.payload;
      const existItem = state.cartItems.find((x) => x.product === item.product);
      if (existItem) {
        return {
          ...state,
          cartItems: state.cartItems.map((x) =>
            x.product === existItem.product ? item : x
          ),
        };
      } else {
        return {
          ...state,
          cartItems: [...state.cartItems, item],
        };
      }
    },
  },
});

export const { addItem } = cartSlice.actions;
export default cartSlice.reducer;

export function addToCart(id, qty) {
  return async function addToCartThunk(dispatch, getState) {
    try {
      const { data } = await axios.get(`/api/products/${id}`);

      dispatch(
        addItem({
          product: data._id,
          name: data.name,
          image: data.image,
          price: data.price,
          countInStock: data.countInStock,
          qty,
        })
      );
      localStorage.setItem("cartItems", JSON.stringify(getState.cart));
    } catch (error) {
      console.log(error);
    }
  };
}

Here is the Store.js code

import { configureStore } from "@reduxjs/toolkit";
import productReducer from "./productSlice";
import productDetailReducer from "./productDetailSlice";
import cartReducer from "./cartSlice";

const store = configureStore({
  reducer: {
    productList: productReducer,
    productDetails: productDetailReducer,
    cartPage: cartReducer,
  },
});

export default store;

Here is the CartScreen.js code

import React from "react";
import { Link } from "react-router-dom";
import { useEffect } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { addToCart } from "../store/cartSlice";

const EMPTY_CART = { cartItems: [] };

const CartScreen = () => {
  const { productId } = useParams();

  const location = useLocation();
  const qty = location.search ? Number(location.search.split("=")[1]) : 1;
  const dispatch = useDispatch();

  const cart = useSelector((state) => state.cart || EMPTY_CART);
  const { cartItems } = cart;
  console.log(cartItems);

  useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qty));
    }
  }, [dispatch, productId, qty]);

  return <div>Cart Page</div>;
};

export default CartScreen;

Problems in "Add to Cart" using react redux-toolkit and localstorage

0 Answers0