【Ant Design Pro】不想用轻量的hook就喜欢用dva的数据状态管理

就像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-***ponents';
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管理数据的业务需求。