使用 react redux-toolkit 和 localstorage 的“添加到购物车”功能不起作用

Question

我正在使用 redux-toolkit 向电子商务网站添加“添加到购物车”功能。 我也在使用本地存储和 thunk 中间件，但它不工作。 控制台上没有任何显示。 这段代码有什么问题？

Redux 开发工具

这是 CartSlice.js 代码

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);
    }
  };
}

这是 Store.js 代码

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;

这是 CartScreen.js 代码

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;

Answer 1

你能试试这个吗？

// CartSlice.js
export const addToCart = createAsyncThunk(
  'cartPage/addToCart',
  async ({ id, qty }, thunkAPI) => {
    try {
      const { data } = await axios.get(`/api/products/${id}`);

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

这是来自文档的语法，其中返回一个闭包，然后在您的组件中调用该闭包，如下所示：

  import { addToCart } from '~/yourPath/CartSlice.js'

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