mapDispatchToProps dispatch action working for only one function

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

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