项目随笔2

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

College


内容框架

  1. mapStateToProps里返回的数据, 是从CollegeReduxreducer返回的新的state获取
  2.  
  3.  
  4. mapStateToProps(state) {
  5. return {
  6. article: state.CollegeReducer.article //state后面要跟reducer名
  7. }
  8. }
  1. mapDispatchToProps(dispatch) {
  2. return {
  3. action: bindActionCreators(actions,dispatch) //这里面的actions是在College顶部获取的 import { actions } from 'CollegeRedux';
  4. }
  5. }

路径跳转

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

CollegeRedux:

  1. action的定义中请求数据
  2. function getArticle() {
  3. return (dispatch) => {
  4. axios({
  5. method: 'post',...,onSuccess: (res) => {
  6. dispatch({
  7. type: 'ARTICLE',data: res.list //根据后台给的接口
  8. })
  9. }
  10. })
  11. }
  12. }
  1. 输出reducer
  2. export default function CollegeReducer( state=initState,action ) {
  3. switch(action.type) {
  4. case 'ARTICLE':
  5. return Object.assign({},state,{ article: action.data });
  6. }
  7. }
  1. 输出总的 actions
  2. export const actions = { //注意不是这里用bindActionCreators
  3. getArticle,...
  4. }
  5.  
  6. 多个页面可以使用同一个CollegeRedux文件,不用重新写一个redux文件

猜你在找的React相关文章