redux 中得数据绑定到React组件

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)
                });
        }
    }
};