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

Question

I am following a tutorial to learn Redux and use this in my own project. Every action i used before work perfectly. But for my last action i get this error:

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

Here the part of my store:

const reducer = combineReducers({
    productList : productListReducer,
    productDetails: productDetailsReducer,
    cart: cartReducer
});

const cartItemsFromStorage = localStorage.getItem('cartItems')
    ? JSON.parse(localStorage.getItem('cartItems'))
    : []

const initialState = {
    cart: {cartItems: cartItemsFromStorage},
}; 

Here the famous component where i get this error:

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;

Here my reducer:

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;
    }
}

And here my action:

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))
}

Thank you to help me :)

Have a nice day.

Answer 1

My error came from the fact i forget to add '.js' at cartActions. The name was 'cartAtctions'.

So now after rename 'cartActions.js' it's work perfectly.

Thank you to read me and have a nice day :)