这个例子采用module范式:
- shopcart
- produts 商品模块
- cart 购物车模块
- store redux
- index.js
代码
import React, {
Component } from "react";
import {
connect } from "react-redux";
import {
asyncLoadData, decrementInventory } from "../actionCreator";
import ProductsUi from "../ui/ProductsUI";
import {
actionCreator as cartCreator } from "../../cart/";
const mapState = (state) => ({
all: state.products.all,
});
const mapDispatch = (dispatch) => ({
loadData() {
dispatch(asyncLoadData());
},
addToCart(value) {
dispatch(cartCreator.addToCart(value));
dispatch(decrementInventory(value.id));
},
});
@connect(mapState, mapDispatch)
class products extends Component {
componentDidMount() {
this.props.loadData();
}
handleAddToCart = (value) => {
this.props.addToCart(value);
};
render() {
return (
<ProductsUi {
...this.props} addToCart={
this.handleAddToCart}></ProductsUi>
);
}
}
export default products