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
    })
  },
};