尝试导入错误：“addToCart”未从“../actions/cartActions”导出。使用 Redux答案

【问题标题】：Attempted import error: 'addToCart' is not exported from '../actions/cartActions'. with Redux尝试导入错误：“addToCart”未从“../actions/cartActions”导出。使用 Redux
【发布时间】：2021-07-21 11:32:49
【问题描述】：

我正在按照教程学习 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))
}

谢谢你帮助我:)

祝你有美好的一天。

【问题讨论】：

标签： javascript reactjs redux reducers redux-reducers

【解决方案1】：

我的错误来自于我忘记在 cartActions 中添加“.js”。名称是“cartAtctions”。

所以现在重命名 'cartActions.js' 后它可以完美运行了。

感谢您阅读我，祝您有美好的一天:)

【讨论】：