React实现page层与model层分开写

EventList.js中的数据

export default { 
    // 命名空间，根据唯一的名字找到对应的数据
    namespace: 'EventList', 
    state: { 
        data: [1, 2, 3], 
        maxNum: 3 
    },
    reducers : { // 定义一些函数
        addNewData: function(state, result){ // 这里的state是更新之前的状态数据, 是state中存在的数据

            if(result.data){ //如果state中存在data数据，直接返回，在做初始化的操作
                return result.data;
            }

            let maxNum = state.maxNum + 1;
            // ... 是react中的解构表达式， 表示将this.state.datalist展开， 然后加止maxNum，组成新的数组
            let newArr = [...state.data, maxNum]
         
            // 重新进行渲染，这里state中的数据更新后，页面会重新的渲染
            // 现在这种情况不能通过Setstate来作更新， 通过return来更新
            // this.setState({
            //     dataList: newArr,
            //     maxNum: maxnum
            // });

            // 通过return 返回更新后的数据
            return {
                data: newArr,
                maxNum: maxNum
            }
        }
    }
}

Event.js

import React, { Component } from 'react';
import { connect } from 'dva';

// 加namespace是确定唯一的空间
const namespace = "EventList";
// @connect(setToProps) 可以通过=> 方式回调，也可以使用写函数的方式回调

// 通过dva中的connect获取获取到model中的数据
@connect(
  // 说明：第一个回调函数，作用：将page层和model层进行链接，返回model中的数据
  // 并且，将返回的数据，绑定到this.props
  (state) => {
    // 这里用return就是将数据绑定到props上，后面使用的时候就this.props.param
    return{ // 需要注意这里的括号是{}
      data: state[namespace].data,
      maxNum: state[namespace].maxNum
    }
  },

  (dispatch) => {
    // 第二个参数 的作用： 将定义的参数绑定到this.props中，调用model层中定义的函数
    return{ // 将返回的函数绑定到this.props中
      addNum: function(){
        dispatch({
          // 这里的addNewData对应model中的一个方法
          type: namespace + "/addNewData"
        })
      }
    }
  }
)
class Event extends Component {
  constructor(props) {
    super(props);
    // 数据在model中进行处理
    // this.state = {};
  }

  // 这个方法在dispatch中定义， 修改了数据
  add =()=> {
    // 这个方法在dispatch中定义， 修改了数据
    this.props.addNum()
  }
  render() {
    return (
      <div>
          <ul>
            {
              this.props.data.map(
                (value, index) => {
                  return <li key={index}>{value}</li>
                }
              )
              // this.props.eventList.map((value, index) => <li key={index}>{value}</li>)
            }
          </ul>
          {/* page层修改model中的数据，通过睚model中的reduce修改 */}
          {/* 在@connect中传入的第二个参数来修改model中的数据 */}
          <button onClick={this.add} >clickMeAdd</button>
      </div>
    );
  }
}

export default Event;

测试如下：