添加到购物车redux react问题，无法在redux devtools中获取'CART_ADD_ITEM‘常量，控制台显示错误
添加到购物车redux react问题，无法在redux devtools中获取'CART_ADD_ITEM‘常量，控制台显示错误
提问于 2021-03-01 18:54:11
所以我在一个网上商店工作，我面临着一个问题，我的CART_ADD_ITEM常量似乎对我的代码是不可见的，所以我有一个未捕获的(in promise)错误:请求失败，状态代码404，CART_ADD_ITEM没有出现在我的redux开发工具中……
以下是我的代码
cartConstants：
export const CART_ADD_ITEM = 'CART_ADD_ITEM';
cartActions：
import Axios from "axios";
import { CART_ADD_ITEM } from "../constants/cartConstants";
export const addToCart = (productId, qty) => async (dispatch, getState) => {
const { data } = await Axios.get(`api/products/${productId}`);
dispatch({
type: CART_ADD_ITEM,
payload:{
name: data.name,
image: data.image,
price: data.price,
countInStock: data.countInStock,
product: data._id,
qty,
},
});
localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
}; cartReducers
export const cartReducer = (state = { cartItems: [] }, action) => {
switch(action.type){
case CART_ADD_ITEM:
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]};
}
default:
return state;
}
};cartScreen
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { addToCart } from '../actions/cartActions';
export default function CartScreen(props) {
const productId = props.match.params.id;
const qty = props.location.search
? Number(props.location.search.split('=')[1])
: 1;
const dispatch = useDispatch();
useEffect(() => {
if(productId){
dispatch(addToCart(productId, qty));
}
}, [dispatch, productId, qty]);
return (
<div>
<h1>Cart Screen</h1>
<p>ADD TO CART : ProductID: {productId} Qty : {qty} </p>
</div>
);
}store.js
import {applyMiddleware, createStore, compose, combineReducers} from 'redux';
import thunk from 'redux-thunk';
import { cartReducer } from './reducers/cartReducers';
import { productDetailsReducer, productListReducer } from './reducers/productReducers';
const initialState = {
cart:{
cartItems: localStorage.getItem('cartItems')
? JSON.parse(localStorage.getItem('cartItems'))
: [],
},
};
const reducer = combineReducers({
productList: productListReducer,
productDetails: productDetailsReducer,
cart: cartReducer,
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
export default store;以及产品页面上用于添加到购物车的按钮：
<button onClick={addToCartHandler} className="primary block">Add To Cart</button>谢谢你的帮助!！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-02 05:25:14
请求失败，状态代码为404
你会得到一个404 Not Found错误，这意味着你的URL路径是错误的，所以很明显你会想要改变它。您可能在一开始就打算用/编写/api/products/${productId}。
未捕获(在承诺中)错误
Axios.get是一个Promise。有时请求成功，有时请求失败。您的代码没有正确处理失败的情况。该错误消息中的"Uncaught“一词意味着您需要”捕获“错误。您可以使用try/catch块来实现这一点，并在失败时调度某种类型的错误操作。(或者你可以抓住它什么也不做)
export const addToCart = (productId, qty) => async (dispatch, getState) => {
try {
const { data } = await Axios.get(`api/products/${productId}`);
dispatch({
type: CART_ADD_ITEM,
payload: {
name: data.name,
image: data.image,
price: data.price,
countInStock: data.countInStock,
product: data._id,
qty
}
});
// I don't think this is the best place for setting localStorage
localStorage.setItem( "cartItems", JSON.stringify(getState().cart.cartItems) );
} catch (error) {
dispatch({
type: CART_ADD_ITEM_FAILURE,
payload: error
});
}
};更简单的方法是使用redux-toolkit中的createAsyncThunk helper函数。您只需编写代码的异步部分，它将自动分派挂起、履行和拒绝的不同操作。
export const addToCart = createAsyncThunk(
'cart/addItem', // base action name
async ({productId, qty}) => {
const { data } = await Axios.get(`api/products/${productId}`);
// return the success payload
return {
name: data.name,
image: data.image,
price: data.price,
countInStock: data.countInStock,
product: data._id,
qty
}
}
);您需要更改您的操作名称。您还需要更改对操作创建者的调用，以将这两个参数作为对象的属性进行传递。
dispatch(addToCart({productId, qty}))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66420774
复制相关文章
相似问题
腾讯云开发者
