如何解决尝试导入错误:“addToCart”未从“../actions/cartActions”导出使用 Redux
我正在按照教程学习 Redux 并在我自己的项目中使用它。我之前使用的每个动作都完美无缺。但是对于我的最后一个操作,我收到此错误:
Attempted import error: 'addToCart' is not exported from '../actions/cartActions'.
这是我商店的一部分:
const reducer = combineReducers({
productList : productListReducer,productDetails: productDetailsReducer,cart: cartReducer
});
const cartItemsFromStorage = localStorage.getItem('cartItems')
? JSON.parse(localStorage.getItem('cartItems'))
: []
const initialState = {
cart: {cartItems: cartItemsFromStorage},};
这是我收到此错误的著名组件:
import React,{useEffect} from "react";
import {useDispatch,useSelector} from "react-redux";
import { addToCart } from '../actions/cartActions'
const CartScreen = ({match,location,history}) => {
const productId = match.params.id
const qty = location.search ? Number(location.search.split('=')[1]) : 1
const dispatch = useDispatch()
const cart = useSelector((state) => state.cart)
const { cartItems } = cart
useEffect(() => {
if (productId) {
dispatch(addToCart(productId,qty))
}
},[dispatch,productId,qty])
return (
<div>
Cart
</div>
)
}
export default CartScreen;
这里是我的减速器:
import {CART_ADD_ITEM,CART_REMOVE_ITEM} from "../constants/cartConstants";
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;
}
}
这里是我的行动:
import axios from "axios";
import {CART_ADD_ITEM} from "../constants/cartConstants";
export const addToCart = (id,qty) => async (dispatch,getState) => {
const { data } = await axios.get(`/api/products/${id}`)
dispatch({
type: CART_ADD_ITEM,payload: {
product: data._id,name: data.name,image: data.image,price: data.price,countInStock: data.countInStock,qty,},})
localStorage.setItem('cartItems',JSON.stringify(getState().cart.cartItems))
}
谢谢你帮助我:)
祝你有美好的一天。
解决方法
我的错误是因为我忘记在 cartActions 中添加“.js”。名称是“cartAtctions”。
所以现在重命名“cartActions.js”后,它完美地工作了。
感谢您阅读我并祝您度过愉快的一天:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。