如何使用 Redux 和 ReactJS 向功能组件添加动作

Question

我尝试将操作“addProduct”添加到组件中。但是当我点击它时看到一个错误，帮助我应对，在此先感谢！我不明白我的错误在哪里（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(null,  mapDispatchToProps)(ProductListItem);[enter image description here][1]

Answer 1

我做了一些更新，并包含了我正在做的事情的一个例子。

1. 看起来你需要connect从react-redux

2. addProduct既然你已经映射了它，你需要从你的道具中解构mapDispatchToProps

3. 我重新定义mapDispatchToProps为不使用bindActionCreators，这只是一个偏好问题，但两者都应该有效。

4. 在您的 中connect()，我通过使用...rest 并将其传播到返回的道具中来解构所有剩余的道具。

..

家长

import React from "react"

import ProductListItem from "./ProductListItem"

const products = [1,2,3] <-- data might be in redux-state but I'll use this for simplicity.

const TestHolder = () => {

    return(

        <div>

            <ProductListItem products={products}/>

        </div>

    )

}

export default TestHolder

产品列表项

import React from "react"

import { connect } from "react-redux"

import { addProduct } from "../../actions/testActions";

const ProductListItem = ({ product, addProduct }) => {

  return (

    <div className="product">

      <button className="add_card" onClick={() => addProduct()}>

        {" "}

        add to cart

      </button>

    </div>

  );

};

const mapDispatchToProps = dispatch => {

  return {

    addProduct: (product) => {

      dispatch(addProduct(product))

    }

  }

};

export default connect(null, mapDispatchToProps)(({ products = [], ...rest }) =>

  products.map((product, i) => {

    return <ProductListItem key={i} product={product} {...rest} />;

  }))

动作创建者

export const addProduct = () => {

    return {

        type: "Woof"

    }

}

您可能已经对 action-creator 进行了格式错误并使其成为普通对象而不是返回对象的函数。