Uncaught ReferenceError: mapdispatchtoprops is not defined ReactJS Redux

Question

I am trying to build an cart to store items which i have fetched with the fakestore Api. But somehow I get this RefereceError for an variable which I have already defined. Furthermore the addToCart method is not being used.

This is my Main file which I am using:

import React, {useState, useEffect} from 'react'
import { useParams } from 'react-router'
import { NavLink } from 'react-router-dom';
import Skeleton from 'react-loading-skeleton';
import { connect } from 'react-redux';
import { addToCart } from '../redux/Shopping/shoppingActions';

const Product = ({productData, addToCart}) => {

const {id} = useParams();
const [product, setProduct] = useState([]);
const [loading, setLoading] = useState(false);

//fetch the clicked product 
useEffect(() => {
    const getProduct = async () => {
        setLoading(true);
        const response = await fetch(`https://fakestoreapi.com/products/${id}`); 
        setProduct(await response.json());
        setLoading(false);
    }
    getProduct();
}, [id]);


const Loading = () => {
    return(
        <div className="loading">
            Loading...
        </div>
    );
};

const mapdispatchtoprops = (dispatch) => {
    return{
        addToCart: (id) => dispatch(addToCart(id))
    };
};

const ShowProduct = () => {
    return(
        <div>
            <div className='productImage'>
                <img src={product.image} alt={product.title} height='400px' width='400px'/>
            </div>
            <div className='productText'>
                <h1 className='productTitle'>{product.title}</h1>
                <h4 className='productCategory'>{product.category}</h4>
                <p className='productRating'>Rating {product.rating && product.rating.rate}</p>
                    <i className='productRatingStars'></i>
                <h3 className='productPrice'>${product.price}</h3>
                <p className='productDescription'>{product.describtion}</p>
                <button className='addCart' onClick={()=>addToCart(productData.id)}>Add to Cart</button>
                <NavLink to='/cart' className='goCart'>Go to Cart</NavLink>
            </div>
        </div>
    )
}

return (
    <div>
        <div className='container'>
            <div className='row'>
                {loading?<Loading/>:<ShowProduct/>}
            </div>
        </div>
    </div>
)
}

export default connect (null, mapdispatchtoprops)(Product); 

Thats the file I am getting the "addToCart" from:

import * as actionTypes from './shoppingTypes'

export const addToCart = (itemID) => {
    return{
        type: actionTypes.ADD_TO_CART,
        payload: {
            id: itemID,
        }, 
    };
}; 
export const removeFromCart = (itemID) => {
    return{
        type: actionTypes.REMOVE_FROM_CART,
        payload: {
            id: itemID,
        }, 
    };
};
export const adjustQty = (itemID, value) => {
    return{
        type: actionTypes.ADJUDT_QTY,
        payload: {
            id: itemID,
            qty: value,
        }, 
    };
};
export const loadCurrentItem = (itemID, value) => {
    return{
        type: actionTypes.LOAD_CURRENT_ITEM,
        payload: {
            id: itemID,
            qty: value,
        }, 
    };
};

Answer 1

You've declared mapdispatchtoprops inside the Product component, so it's undefined in the outer file scope where you are trying to use it in the connect HOC. Move it outside Product.

const Product = ({ productData, addToCart }) => {
  ...
};

const mapDispatchToProps = {
  addToCart
};

export default connect(null, mapDispatchToProps)(Product);