Reactjs 如何使用react和redux传递数据？

我开始学习更多关于React和Redux的知识，但在从API调用传递数据时遇到了问题

我尝试使用console.logs和Dev工具进行调试。我不明白为什么我的产品标签上没有数据

以下是我对产品的行动：

import * as types from "./types";

export const receiveProducts = () => async dispatch => {
  const response = await fetch("https://api.myjson.com/bins/m2w5s");
  const data = await response.json();
  dispatch({ type: types.RECEIVED_PRODUCTS_SUCCESSFULLY, payload: data });
};

组成项目：

import React from "react";
import { connect } from "react-redux";
import { addProductToCart, updateCart } from "../actions/cartAction";
import "./product.css";

class ProductItem extends React.Component {
  handleOnclick = product => {
    if (this.props.cart.length > 0) {
      let id = product.id;
      let cartIndex = this.props.cart.findIndex(cart => {
        return cart.id === id;
      });
      if (cartIndex === -1) {
        this.props.addProductToCart(product);
      } else {
        this.props.updateCart(id, "+");
      }
    } else {
      this.props.addProductToCart(product);
    }
  };
  render() {
    const { price, description, img } = this.props.product;
    return (
      <div className="card-image">
        <img src={img} alt="products" />
        <span className="card-description">{description}</span>
        <hr />
        <div className="card-content">
          <p>{description}</p>
          <h3>$ {price}</h3>
        </div>
        <button
          onClick={() => {
            this.handleOnclick(this.props.book);
          }}
        >
          Buy
        </button>
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    cart: state.cart.cart
  };
};
export default connect(
  mapStateToProps,
  { addProductToCart, updateCart }
)(ProductItem);

从“React”导入React；
从“react redux”导入{connect}；
从“./actions/cartAction”导入{addProductToCart，updateCart}；
导入“/product.css”；
类ProductItem扩展了React.Component{
handleOnclick=产品=>{
如果（this.props.cart.length>0）{
设id=product.id；
让cartIndex=this.props.cart.findIndex（cart=>{
return cart.id==id；
});
如果（cartIndex==-1）{
this.props.addProductToCart（产品）；
}否则{
this.props.updateCart（id，“+”）；
}
}否则{
this.props.addProductToCart（产品）；
}
};
render（）{
const{price，description，img}=this.props.product；
返回(
{说明}

{说明}

${price}
{
this.handleOnclick（this.props.book）；
}}
>
购买
);
}
}
常量mapStateToProps=状态=>{
返回{
购物车：state.cart.cart
};
};
导出默认连接(
MapStateTops，
{addProductToCart，updateCart}
)（项目）；

组件列表：

import React from "react";
import ProductItem from "./ProductItem";
import { connect } from "react-redux";
import { receiveProducts } from "../actions/productAction";
import "./product.css";

class ProductList extends React.Component {
  componentDidMount() {
    this.props.receiveProducts();
  }
  render() {
    const { products } = this.props;
    const productList = products.map(product => (
      <ProductItem product={product} key={product.id} />
    ));
    return (
      <div>
        <h1>Produce</h1>
        <div className="products-container">{productList}</div>
      </div>
    );
  }
}
const mapstateToProps = state => {
  return {
    products: state.products.products
  };
};
export default connect(
  mapstateToProps,
  { receiveProducts }
)(ProductList);

从“React”导入React；
从“/ProductItem”导入ProductItem；
从“react redux”导入{connect}；
从“./actions/productAction”导入{receiveProducts}；
导入“/product.css”；
类ProductList扩展了React.Component{
componentDidMount（）{
this.props.receiveProducts（）；
}
render（）{
const{products}=this.props；
const productList=products.map（product=>(
));
返回(
产生
{productList}
);
}
}
常量mapstateToProps=状态=>{
返回{
产品：国家产品
};
};
导出默认连接(
MapStateTops，
{receiveProducts}
)（产品清单）；

您在文件

reducers/index.js

中犯了一个错误，您写道：

const rootReducer = combineReducers({
 books: productReducer,
 cart: cartReducer
});

而不是

const rootReducer = combineReducers({
 products: productReducer,
 cart: cartReducer
});

---

下面是包含固定版本的文件

您在文件

reducers/index.js

中犯了一个错误，您写道：

const rootReducer = combineReducers({
 books: productReducer,
 cart: cartReducer
});

而不是

const rootReducer = combineReducers({
 products: productReducer,
 cart: cartReducer
});

---

这是包含固定版本的文件

您在MapStateTrops的

状态中键入了一个额外的产品。产品。产品

。@its4zahoor您是说它应该是

状态。产品

？我刚刚检查了您的沙箱。它工作正常。您在MapStateTops中的

state.products.products

中键入了一个额外的products。@它是4Zahoor，您是说它应该是

state.products

？我刚刚检查了您的沙箱。它工作得很好。