就像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 } = props
const 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 } = props
const [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
管理数据的业务需求。