I am encountering this error: "Uncaught TypeError: dispatch is not a function at removeFromCart (CheckoutProduct.js:11:1)", when trying to execute a dispatch action on the window. I am working on react context API not redux.

Here is my code for the CheckoutProduct.js

import "./CheckoutProduct.css";
import { useStateValue } from "./StateProvider";

function CheckoutProduct({ id, title, image, price, rating }) {
  const [dispatch] = useStateValue();

  console.log(id, title, image, price, rating);

  const removeFromCart = () => {
    dispatch({
      type: "REMOVE_FROM_CART",
      id: id,
    });
  };

  return (
    <div className="checkoutProduct">
      <img className="checkoutProduct__image" src={image} alt="" />

      <div className="checkoutProduct__info">
        <p className="checkoutProduct__title">{title}</p>

        <p className="checkoutProduct__price">
          <small>₹</small>
          <strong>{price}</strong>
        </p>

        <div className="checkoutProduct__rating">
          {Array(rating)
            .fill()
            .map((_, i) => (
              <p>⭐</p>
            ))}
        </div>

        <button onClick={removeFromCart}>Remove from Cart</button>
      </div>
    </div>
  );
}

export default CheckoutProduct;

This is my code for reducer.js

  cart: [
    {
      id: "12345",
      title: "Versace T-Shirt",
      price: 4999,
      image:
        "https://www.versace.com/dw/image/v2/ABAO_PRD/on/demandware.static/-/Sites-ver-master-catalog/default/dw5f8ee257/original/90_E73GAHT11-ECJ00T_E899_16_PieceNumberLogoT-Shirt-T-shirtsandPolos-versace-online-store_0_2.jpg?sw=450&sh=632&sm=fit&sfrm=jpg&cksizes=380w",
      rating: 3,
    },
    {
      id: "12345",
      title: "Versace T-Shirt",
      price: 4999,
      image:
        "https://www.versace.com/dw/image/v2/ABAO_PRD/on/demandware.static/-/Sites-ver-master-catalog/default/dw5f8ee257/original/90_E73GAHT11-ECJ00T_E899_16_PieceNumberLogoT-Shirt-T-shirtsandPolos-versace-online-store_0_2.jpg?sw=450&sh=632&sm=fit&sfrm=jpg&cksizes=380w",
      rating: 3,
    },
  ],
  user: null,
};

const reducer = (state, action) => {
  console.log(action);
  switch (action.type) {
    case "ADD_TO_CART":
      return {
        ...state,
        cart: [...state.cart, action.item],
      };
    case "REMOVE_FROM_CART":
      let newCart = [...state.cart];

      const index = state.cart.findIndex(
        (cartItem) => cartItem.id === action.id
      );

      if (index >= 0) {
        //remove
        newCart.splice(index, 1);
      } else {
        console.warn(
          `Can't remove product (id: ${action.id} as its not in cart)`
        );
      }
      return {
        ...state,
        cart: newCart,
      };
    default:
      return state;
  }
};

export default reducer;

This is my ./StateProvider.js Image Sorry for the image code, the system is not letting me add code ./StateProvider.js Ignore this part, it's for the system which is not letting me post code nafoiajijaijfajnvnaijijakjlskcadlkcjdnvdnvvanlkcncnchchhchchchcjjdndjkancjndolnhclhndvjsdcecfohfkflkjkljflkjfoiajflandfnduhdvjnvndvdojdnfanfofnavnoavanvnrjsflsjfslfjslfjsfjovonkvkjsvlkjavlkjaldkvjlksvldkvdnv

CodePudding user response：

useReducer returns array with two arguments

1. state
2. dispatch function

You are named your state variable - dispatch and you try to run it

You wanted to do this:

const [,dispatch] = useStateValue();

CodePudding user response：

As this is React Context API and not redux. This might not work for you. But below code worked for me. In CheckoutProduct.js

  const [{ cart }, dispatch] = useStateValue();

  console.log(cart);

  const removeFromCart = () => {
    dispatch({
      type: "REMOVE_FROM_CART",
      id: id,
    });
  };...```