mapDispatchToProps dispatch action working for only one function - reactjs

Question

I have two functions that do about the same thing only in a different array in the state
For no apparent reason only one of them works
Only the addToCart function works
I can not understand why the addToWishList function does not work
Home component
import React, { useEffect, useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
import { useHistory } from "react-router-dom";
import { connect } from "react-redux";
import { addToCart } from ".././redux/Shopping/shopping-action";
import { addToWishList } from ".././redux/Shopping/shopping-action";
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 240,
},
});
function Home({ addToCart }) {
const classes = useStyles();
const history = useHistory();
const [products, setProducts] = useState([]);
useEffect(() => {
fetch("https://fakestoreapi.com/products")
.then((res) => res.json())
.then((json) => setProducts(json));
}, []);
return (
<div>
<h1>ALL PRODUCTS</h1>
<div className="cards ">
{products.map((product) => {
return (
<div className="card">
<Card className={classes.root}>
<CardActionArea
onClick={() => history.push(`/product/${product.id}`)}
>
<CardMedia className={classes.media} image={product.image} />
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{product.title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="h2"
>
{product.category}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button
onClick={() => addToCart(product)}
size="small"
variant="contained"
color="primary"
>
ADD TO CART 🛒
</Button>
<Button
onClick={() => addToWishList(product)}
size="small"
variant="contained"
color="secondary"
>
Add to wish list ❤️
</Button>
</CardActions>
</Card>
</div>
);
})}
</div>
</div>
);
}
const mapDispatchToProps = (dispatch) => {
return {
addToCart: (product) => dispatch(addToCart(product)),
addToWishList: (product) => dispatch(addToWishList(product)),
};
};
export default connect(null, mapDispatchToProps)(Home);
shopping-action.js
import * as actionTypes from "./shopping-types";
export const addToCart = (item) => {
return {
type: actionTypes.ADD_TO_CART,
payload: {
item: item,
},
};
};
export const removeFromCart = (itemId) => {
return {
type: actionTypes.REMOVE_FROM_CART,
payload: {
id: itemId,
},
};
};
export const adjustQty = (itemId, value) => {
return {
type: actionTypes.ADJUST_QTY,
payload: {
id: itemId,
qty: value,
},
};
};
export const addToWishList = (item) => {
console.log(item);
return {
type: actionTypes.WISH_LIST,
payload: {
item: item,
},
};
};
shopping-reducer.js
import * as actionTypes from "./shopping-types";
const INITIAL_STATE = {
cart: [],
wishList: [],
};
const shopReducer = (state = INITIAL_STATE, action) => {
console.log(action.type);
switch (action.type) {
case actionTypes.ADD_TO_CART:
const item = action.payload.item;
const isInCart = state.cart.find((item) =>
item.id === action.payload.item.id ? true : false
);
return {
...state,
cart: isInCart
? state.cart.map((item) =>
item.id === action.payload.item.id
? { ...item, qty: item.qty + 1 }
: item
)
: [...state.cart, { ...item, qty: 1 }],
};
case actionTypes.REMOVE_FROM_CART:
return {
...state,
cart: state.cart.filter((item) => item.id !== action.payload.item.id),
};
case actionTypes.ADJUST_QTY:
return {
...state,
cart: state.cart.map((item) =>
item.id === action.payload.item.id
? { ...item, qty: action.payload.qty }
: item
),
};
case actionTypes.WISH_LIST:
const itemForWish = action.payload.item;
const isInWish = state.cart.find((item) =>
item.id === action.payload.item.id ? true : false
);
return {
...state,
wishList: isInWish ? null : [...state.wishList, { itemForWish }],
};
default:
return state;
}
};
export default shopReducer;
shopping-types.js
export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";
export const ADJUST_QTY = "ADJUST_QTY";
export const WISH_LIST = "WISH_LIST";
Thanks for your time!

Answer 1

You forgot to destructure the addToWishList prop that is injected by the connect HOC, so you are calling directly the action creator and not the one wrapped in a call to dispatch.
import { connect } from "react-redux";
import { addToCart } from ".././redux/Shopping/shopping-action";
import { addToWishList } from ".././redux/Shopping/shopping-action"; // <-- (1) imported
function Home({ addToCart }) { // <-- (3) not destructured
...
return (
<div>
<h1>ALL PRODUCTS</h1>
<div className="cards ">
{products.map((product) => {
return (
<div className="card">
<Card className={classes.root}>
...
<CardActions>
<Button
onClick={() => addToCart(product)}
...
>
ADD TO CART 🛒
</Button>
<Button
onClick={() => addToWishList(product)} // <-- (4) non-wrapped action
...
>
Add to wish list ❤️
</Button>
</CardActions>
</Card>
</div>
);
})}
</div>
</div>
);
}
const mapDispatchToProps = (dispatch) => {
return {
addToCart: (product) => dispatch(addToCart(product)),
addToWishList: (product) => dispatch(addToWishList(product)), // <-- (2) injected
};
};
export default connect(null, mapDispatchToProps)(Home);
To resolve, you should destructure and use the correctly wrapped action.
function Home({ addToCart }) {
Should be
function Home({ addToCart, addToWishList }) {