项目随笔2

前端之家收集整理的这篇文章主要介绍了项目随笔2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

College


内容框架

mapStateToProps里返回的数据, 是从CollegeRedux中reducer返回的新的state中获取的


mapStateToProps(state) {
  return {
    article: state.CollegeReducer.article   //state后面要跟reducer名
    }
}
mapDispatchToProps(dispatch) {
return {
    action: bindActionCreators(actions,dispatch)  //这里面的actions是在College顶部获取的     import { actions } from 'CollegeRedux';
    }
}

路径跳转

如果是内部路径,可以用browserHistory.push('/college/basic');
    如果是外部路径,可以用window.location.href = 'http://www.baidu.com'; 不可以用browserHistory.push
刚加载的时候页面内容的地方背景为黑色,应该设置全局样式
    .wrapper {
        width: 100%;
        height: 100%;
        position: absolute;    //不设置定位,不起作用
    }

CollegeRedux:

action的定义中请求数据
    function getArticle() {
        return (dispatch) => {
            axios({
            method: 'post',...,onSuccess: (res) => {
                dispatch({
                    type: 'ARTICLE',data: res.list    //根据后台给的接口
                })
            }
        })
        }
    }
输出reducer
    export default function CollegeReducer( state=initState,action ) {
        switch(action.type) {
            case 'ARTICLE': 
                return Object.assign({},state,{ article: action.data });
        }
    }
输出总的 actions
export const actions = {                //注意不是这里用bindActionCreators
    getArticle,...
}

多个页面可以使用同一个CollegeRedux文件,不用重新写一个redux文件
原文链接:https://www.f2er.com/react/302893.html

猜你在找的React相关文章