0

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

谢谢你帮助我:)

祝你今天过得愉快。

4

1 回答 1

1

我的错误来自我忘记在cartActions添加 '.js' 的事实。名字是' cartAtctions '。

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

谢谢你读我，祝你有美好的一天:)

于 2021-04-28T08:31:46.773 回答