项目随笔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文件

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...