container.js
//父级组件
class PrizeList extends Component{
render() {
return (
<div style={{background:"blue"}}>
<PrizeItems
awardList={this.props.award.awardList}
awardActionKeys={this.props.awardActionKeys}
/>
</div>
)
}
}
//子级组件
class PrizeItems extends Component{
componentWillMount(){
this.props.awardActionKeys.getAward();
}
render() {
let PrizeItem = this.props.awardList.map((item,index)=>{
return (
<li key={index}>
<img src={item.productInfo.picUrl} />
</li>
)
});
return (
<ul>
{PrizeItem}
</ul>
)
}
}
// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的?
function mapStatetoProps(state){
return {
award:state.award,
};
}
// 哪些 action 创建函数是我们想要通过 props 获取的?
function mapDispatchToProps(dispatch){
return{
awardActionKeys:bindActionCreators(awardActions,dispatch),
}
}
module.exports = connect(mapStatetoProps,mapDispatchToProps)(PrizeList);
//connect后面第二个括号是要添加prop的react组件,
// 第一个括号中的参数是用来改变该组件prop的方法,
// 第一个括号有两个参数;
// @param1 函数,返回一个对象,对象的键是该组件的prop属性,值是该prop的值;
// @param2 函数,返回一个对象,对象的键同样是prop的属性名,值是一个redux的dispatch,
//当这个prop属性被用于触发时,dispatch会改变redux中state的值。
action.js
export var awardActions = {
getAward : (awardType=award.list.week)=>{
return (dispatch,getState)=>{
let loginInfo = getState().loginInfo;
let postData = {
accessInfo:loginInfo.baseLoginData,
awardType:awardType
};
var p1 = new Promise(function (res, rej) {
$.ajax({
url:"src/data/award.json",
type:"GET",
dataType:"json",
success:function (data) {
res(data);
}
})
});
p1.then(
(data)=>{
dispatch({type:'GET_AWARD', data})
console.log(data)
});
}
}
};