就像TS是JS的超集一样，antdpro框架也类似，底层也是用dva来构建的。关于数据管理，官方还是建议我们使用轻量的hooks方法来进行操作使用。

使用dva实现数据状态管理效果

框架中的数据管理模式

简单的数据共享

对于简单的应用，不需要复杂的数据流，只需要一些简单的数据共享。我们推荐使用中台最佳实践简易数据流，比较的简单，这里就不做过多的解释了。

开启dva

找到配置文件,我们要自己手动加上这个配置，重启系统后就可以使用dva的模式进行开发了。

• config/config.ts

//...
dva: {},
//...

加上这个配置就可以，其他的操作就跟@umi/max里面操作一样了。

步骤

• src/models/userModel.ts

const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));export default {state: {user: {name: 'zs',age: 18,},count: 10,},effects: {*asyncAdd({ payload }: { payload: any }, { call, put }: { call: any; put: any }) {console.log('🚀 ~ *queryUser ~ payload:', payload);yield call(delay, 2000);yield put({ type: 'add', payload });},},reducers: {add(state: any, { payload }: any) {console.log('🚀 ~ add ~ payload:', payload);return {...state,count: state.count + payload,};},minus(state: any, { payload }: any) {return {...state,count: state.count - payload,};},},test(state: any) {console.log('test');return state;},
};

在页面文件中引入connect，把数据和组件进行关联。

• pages/DemoTest.ts

import  { Button, Space, Table, Form, Input,Image} from 'antd'
import type { TableColumnsType, TableProps } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import React from 'react'
import { connect } from '@umijs/max';
import { KeepAlive,useModel,history } from 'umi'
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
type NameType = {name:string,age:number,address?:string,
}
interface DemoProps {user:NameType,add:()=>void,minus:()=>void,asyncAdd:()=>void,count:number,msg:string,
}interface CountType {count:number
}interface DataType {key: React.Key;name: string;age: number;address: string;
}type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];const columns: TableColumnsType<DataType> = [{ title: 'Name', dataIndex: 'name' },{ title: 'Age', dataIndex: 'age' },{ title: 'Address', dataIndex: 'address' },
];const dataSource = Array.from<DataType>({ length: 46 }).map<DataType>((_, i) => ({key: i,name: `Edward King ${i}`,age: 32,address: `London, Park Lane no. ${i}`,
}));
const DemoPage:React.FC<DemoProps> = (props) => {console.log("🚀 ~ props:", props)const { msg,user,add,count: num,minus,asyncAdd } = propsconst handleAdd:() => void = () => {setCount(count + 1)add()}const handleMinus:() => void = () => {setCount(count - 1)minus()}const handleAddAsync = () => {asyncAdd()}return <div><h2>Demo Page</h2>{/* <p><Image src={initialState?.settings?.logo}/></p> */}<div><p>{msg}</p><p>{user.name  + '---------'  +   user.age}</p><p>dva里面的num:{num}</p><Space><Button type="primary" onClick={handleAdd}>add</Button><Button type="primary" danger onClick={handleMinus}>minus</Button><Button type="primary"  onClick={handleAddAsync}>addAsync</Button></Space></div></div>
}const Counter:React.FC<CountType> = (props) => {// const { count } = propsconst [count, setCount] = React.useState(0)const handleAdd:() => void = () => {setCount(count + 1)}return <div><p>{count}</p><Button type="primary" onClick={handleAdd}>add</Button></div>}const mapStateToProps = (state:any) => {return {user: state.userModel.user,count: state.userModel.count}
}const mapToDispatchToProps = (dispatch:any) => {return {add: () => dispatch({ type: 'userModel/add', payload: 4 }),minus: () => dispatch({ type: 'userModel/minus', payload: 4 }),asyncAdd: () => dispatch({ type: 'userModel/asyncAdd',payload:20 })}}export default connect(mapStateToProps,mapToDispatchToProps)(DemoPage)

这样就完成了在antd-design-pro里面使用dva管理数据的业务需求。