Attempted import error: 'addToCart' is not exported from '../actions/cartActions'. with Redux

Question

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

谢谢你帮我:)

祝你有愉快的一天。

Answer 1

我的错误是因为我忘记在 cartActions 添加“.js”。名称是“cartAtctions”。

所以现在在重命名“cartActions.js”之后它工作得很好。

感谢您阅读我的文章，祝您有愉快的一天:)

Attempted import error: 'addToCart' is not exported from '../actions/cartActions'. with Redux

Attempted import error: 'addToCart' is not exported from '../actions/cartActions'. with Redux

javascript

reducers

reactjs

redux

redux-reducers