项目随笔2

2024年4月7日 149次阅读 来源: wscops

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文件
    原文作者：wscops
    原文地址: https://segmentfault.com/a/1190000011124783
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞