如何使用 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

要正确添加您的操作，您需要使用 redux 连接功能将 dispatch 映射到您的组件。

function connect(mapStateToProps?, mapDispatchToProps?, ...)

第一个参数用于将状态映射到道具。

const mapStateToProps = state => {
    return { products: state.products, cart: state.cart };
};

const Item = connect(mapStateToProps)(MyItemComp)

现在在您的组件中，您可以访问products和cart作为道具。您可以使用this.props.products

第二个参数用于允许您的组件调度操作。

function mapDispatchToProps(dispatch) {
  return {
    addProduct: e => dispatch(addProduct(e))
  };
}

const Item = connect(mapStateToProps, mapDispatchToProps)(MyItemComp)

现在我们可以通过执行addProduct(product).

连接可以像

// will only access props, won't dispatch any actions
const Item = connect(mapStateToProps)(MyItemComp)
// dispatch actions, won't access props
const Item = connect(null, mapDispatchToProps)(MyItemComp)
// will access props and dispatch actions
const Item = connect(mapStateToProps, mapDispatchToProps)(MyItemComp)

现在让我们修复您的组件

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

// add addProduct as a second parameter, to be able to dispatch actions from here
const ProductListItem = ({ product, addProduct }) => {
  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} />;
});

到

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

现在我们需要附加 props 和 dispatcher

// import the above export
import ProductListItem from './ProductListItem';

const ProductList = connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductListItem);

在您的父组件中

render() {
  ...
  return(
    <div>
      ...
      <ProductList />
      ...
    </div>
   )
}

演示

function connect(mapStateToProps?, mapDispatchToProps?, ...)