umi整合dva

①数据使用mockjs模拟

import mockjs from 'mockjs';
export default{
    'GET /api/tags': mockjs.mock({
        'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
    }),
}

②为了结构清晰，单独建一个service.ts文件进行request请求

import { request } from 'umi';

export function getMock(){
   return request('/api/tags')
}

③建立models

import { getMock } from "@/service/service"
export default {
    namespace:'data',
    state:{
        data:[]
    },
    effects:{
        *fetchData({payload,callback},{put,call}){
            
            const response = yield call(getMock)
            //调用reducers，并传递数据
            yield put({
                type:'save',
                payload:response
            })
        }
    },
    reducers:{
        save(state,action){
            return {...state,data:action.payload}
        }

    }
}

④创建UI容器并连接

import { connect } from 'umi';

function IndexPage(props) {
  const {dispatch} = props
  console.log(props.data)

  const mockData = () =>{
    dispatch({
      type:'data/fetchData',
      payload:null
    })
  }
  return (
    <div>
      <button onClick={mockData}>mock数据</button>
    </div>
  );
}
export default connect(({data}) => ({data}))(IndexPage)