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)
                });
        }
    }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容