react+ant design pro得首次使用

react里面components + model连接数据的方式有两种

• 如果组件属于有状态组件，也就是类组件，则用@connect连接，这里值得是使用装饰器

[code]@connect(({ saleProduct, distributor, loading }) => ({
saleProduct,
saleProductList: saleProduct.saleProductList,
currentAccountDistributorList: distributor.currentAccountDistributorList,
loadingSaleProductList: loading.effects['saleProduct/fetchSaleProductList'],
}))

@connect(({namespace})=>({namespace}))

• 如果组件属于无状态组件，也就是函数组件，则用connect连接，这里值得是高阶函数连接

[code]export default connect(({ setting }) => ({
contentWidth: setting.contentWidth,
}))(PageHeaderWrapper);

connect((namespace)=>({namespace})(componentsName))

react里面取接口数据的方式  

• 通过dispath触发model，然后model触发serves,然后serves返回response，然后reducers合并数据，更新state的值， 然后组件可以直接使用model里面state的值
• 还有一种方法可以获取接口返回值，通过dispatch的callback回调获取值，这时候获取的值，可以setState改变组件的状态，如果是通过@connect里面获取的值，由于是props拿到的，props改变的时候回触发render函数，在render函数触发的时候，setState会失效，所以请看需要选择。

[code]const { dispatch } = this.props;
dispatch({
type: 'distributor/fetchCurrentAccountDistributorList',
payload: {},
callback: res => {
this.setState(
{
parentDistributorId: res[0].distributorId,
},
() => {
dispatch({
type: 'saleProduct/fetchSaleProductList',
payload: {
pageNo: 1,
pageSize: 10,
distributorId: res[0].distributorId,
},
callback: response => {
this.setState({
total: response.total,
pageNo: response.pageNum,
pageSize: response.pageSize,
});
},
});
}
);
},
});