0

Пробую передать action addProduct в компонент но при клике пишет ошибку, помогите справиться, зарание спасибо!

import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { addProduct } from "../actions/addProduct";

const ProductListItem = ({ product }) => {
  return (
    <div className="product">
      <img className="product_img" src={product.image} />
      <p>{product.name}</p>
      <p className="bold">$ {product.price}</p>
      <button className="add_card" onClick={() => addProduct(product)}>
        {" "}
        add to cart
      </button>
    </div>
  );
};

export default ({ products = [] }) =>
  products.map((product, i) => {
    return <ProductListItem key={i} product={product} />;
  });


const mapDispatchToProps = dispatch => {
  return bindActionCreators({ addProduct }, dispatch);
};

connect(
  mapDispatchToProps
)(ProductListItem);

2 ответа 2

0

connect это HOC, который возвращает компонент обертку, подписаную на обновления store и опционально передающую в свойства вашего компонента нужные ключи хранилища и dispatch или обернутые в dispacth действия. Само собой, чтобы иметь доступ к этим данным в приложении надо использовать компонент обернутый в этот HOC:

const ProductListItem = ({ product }) => { /* ... */ };

const mapDispatchToProps = {
  addProduct,
};

const ConnectedProductListItem = connect(
   null,
   mapDispatchToProps,
)(ProductListItem); 

const ProductList = ({ products = [] }) => {
  return products.map((product, i) => (
    <ConnectedProductListItem key={i} product={product} />
  ));
};

export default ProductList;
0

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

Первый аргумент mapStateToProps, второй mapDispatchToProps

connect(
  null,
  mapDispatchToProps
)(ProductListItem);

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.