ant design pro基本使用

page 下的index文件

import React, { Component } from 'react';
import {connect} from 'dva';
const nameSpace = 'list'
// @connect（(state)=>{}） 第一个回调函数将page和model连接起来，返回model中的数据，并且将返回的数据绑定到this.props中
// 通过state[nameSpace]就可以获取该命名空间下的model中state数据
// 第二个回调函数：将定义的函数绑定在this.props中，调用model层中定义的函数
@connect((state)=>{
  const  listData = state[nameSpace].data
  const  maxNum = state[nameSpace].maxNum
  return {
    listData, // 可以通过this.props.listData来直接使用该数据
    maxNum
  }
},(dispatch)=>{ // dispatch可以调用model层中定义的函数
  return{ // 将返回的函数绑定在this.props中
    add:function () {
        dispatch({ // 在type这里定义调用，固定格式nameSpace/函数名（reducers中定义的），可以调用reducers中的函数
          type: nameSpace + "/addNewNumber"
        })
    },
    init: ()=>{
      dispatch({ // 和调用reducer中的方式类似，可以调用effects中的方法
        type: nameSpace + "/initData"
      })
    }
  }
})
class Index extends Component {
  componentDidMount() {
    this.props.init()
  }

  render() {
    return (
      <div>
        {this.props.maxNum}
        {this.props.listData.map((item,index)=>{
          return (
            <li key={index}>{item}</li>
          )
        })}
        <button onClick={()=>{
          this.props.add()
        }}>点我</button>
      </div>
    );
  }
}

export default Index;

model层的使用   this.props.add() -> dispatch -> addNewNumer() ->数据改变 -> render()重新渲染视图    使用effects中的方法同理

import request from '../../../../utils/request'
export default {
  namespace: 'list',
  state: {
    data: [],
    maxNum: 0
  },
  reducers:{
    addNewNumber:function (state,result) { // 这个state是更新前的对象  return的是之后新的数据
      if(result.data){
        return result.data
      }
      const newMax = state.maxNum + 1;
      const newArr = [...state.data,newMax]
      return { // 返回的是更新后的对象，更新数据，更新之后，render会重新调用，渲染页面
        data: newArr,
        maxNum: newMax
      }
    }
  },
  effects:{// 用于异步加载数据
    *initData(params,sagaEffects){ //定义异步方法
      const {call, put} = sagaEffects; // 获取到call和put方法
      const url = '/api/list'; // 定义请求的url/
      let data = yield call(request,url); // 执行请求

      yield put({ // 调用reducers中的方法
        type: "addNewNumber", //指定方法名，put可以调用reducers中的函数
        data: data // 传递ajax传递回来的数据 ,会将这个data放在调用方法中的第二个参数当中
      })
    }
  }
}

 mock数据

export default {
  // 支持值为 Object 和 Array
  'GET /api/list': function (req,res) {
    res.json({
      data: [1,2,3,4],
      maxNum: 4
    })
  },
};