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

news2024/11/13 6:33:10

就像TSJS的超集一样,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管理数据的业务需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2236839.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于 CMSIS-PACK 移植Bootloader

基于 CMSIS-PACK 移植 1.准备工作 准备一份基础的裸机源码 (可通过 STM32CubeMx 可视化软件创建也可按照工程项目所需文档手动创建) 工程&#xff0c;如一份 stm32 包含一个支持 printf 的串口初始化代码。 2.安装Pack包 在 MDK 中部署 **MicroBoot **的第一步是获取对应的…

使用ChatGPT神速精读文献,12个高阶ChatGPT提示词指令,值得你复制使用

在学术研究的道路上,文献的阅读和分析往往是我们迈向深层次理解的第一步。如何有效提取文献中的核心要点,如何全面总结一个研究的背景与贡献,甚至如何深入剖析论文中的每个细节,都是每个研究者必须掌握的技能。通过系统化的文献分析,我们不仅能了解现有研究的框架与成果,…

PICO+Unity MR空间锚点

官方链接&#xff1a;空间锚点 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…

Python Matplotlib 如何绘制股票或金融数据图

Python Matplotlib 如何绘制股票或金融数据图 在金融领域&#xff0c;数据可视化是分析市场趋势、股票表现和财务健康的重要工具。Python 的 Matplotlib 库为我们提供了强大的功能来绘制股票和金融数据图。本文将详细介绍如何使用 Matplotlib 绘制这些图表&#xff0c;并且结合…

Golang--反射

1、概念 反射可以做什么? 反射可以在运行时动态获取变量的各种信息&#xff0c;比如变量的类型&#xff0c;类别等信息如果是结构体变量&#xff0c;还可以获取到结构体本身的信息(包括结构体的字段、方法)通过反射&#xff0c;可以修改变量的值&#xff0c;可以调用关联的方法…

【Web前端】使用 JSON 处理数据

JSON 是一种基于 JavaScript 对象语法的数据格式&#xff0c;由道格拉斯克罗克福特推广。尽管其语法源于 JavaScript&#xff0c;JSON 仍然是独立于 JavaScript 的&#xff0c;这也是为什么许多编程环境能够解析和生成 JSON 的原因。JSON 可以以对象或字符串的形式存在&#xf…

VMware 虚拟机使用教程及 Kali Linux 安装指南

VMware 虚拟机使用教程及 Kali Linux 安装指南 在现代计算机科学与网络安全领域&#xff0c;虚拟化技术的应用越来越广泛。VMware 是一款功能强大的虚拟化软件&#xff0c;可以帮助用户在同一台物理机上运行多个操作系统。本文将详细介绍如何使用 VMware 虚拟机&#xff0c;并…

达梦8数据库适配ORACLE的8个参数

目录 1、概述 1.1 概述 1.2 实验环境 2、参数简介 3、实验部分 3.1 参数BLANK_PAD_MODE 3.2 参数COMPATIBLE_MODE 3.3 参数ORDER_BY_NULLS_FLAG 3.4 参数DATETIME_FMT_MODE 3.5 参数PL_SQLCODE_COMPATIBLE 3.6 参数CALC_AS_DECIMAL 3.7 参数ENABLE_PL_SYNONYM 3.8…

三十四、VB基本知识与提高篇

一、代码编写规则: (一)标识符的使用规则: 标识符有两种:一种是系统关键字,另一种是自己定义标识符。 1、不能与系统关键字相同。 2、同一作用域(块)中不同出现重名标识符。用户自定义的标识符是不区分大小写的。 3、自定义标识符必须以字母开头,长度不能超过255…

数据冒险-ld和add(又称load-use冒险)

第一张图没有使用前递&#xff0c;第二张图使用前递&#xff0c;chatgpt分析第二张图 这张图展示了一个流水线的执行过程&#xff0c;其中存在读后写&#xff08;RAW&#xff09;数据冒险。我们可以通过**前递&#xff08;Forwarding&#xff09;**技术来解决这个数据冒险&…

Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 (三)

使用标定好的结果进行跟踪标定板的位置 坐标转换的步骤为&#xff1a; 1.图像坐标点转到相机坐标系下的点 2.相机坐标系下的点转为夹爪坐标系下的点 3.夹爪坐标系下的点转为机械手极坐标系下的点 跟踪的方式 1.采用标定板的第一个坐标点作为跟踪点 3.机器人每次移动到该点位&a…

石墨舟氮气柜:半导体制造中的关键保护设备

石墨舟是由高纯度石墨材料制成的&#xff0c;主要用于承载硅片或其他基板材料通过高温处理过程&#xff0c;是制造半导体器件和太阳能电池片的关键设备之一。 石墨舟在空气中容易与氧气发生反应&#xff0c;尤其是在高温处理后&#xff0c;表面可能更为敏感&#xff1b;石墨舟具…

跟着大厂学AI | 智谱AI文本数据提取实践(大模型实战篇)

书接上回理论篇&#xff0c;本文详细介绍LLM处理模块、Prompt 构建、数据抽取后处理、数据校验、数据修复具体实战教程。 想看方案理论教程详见&#xff1a; 跟着大厂学AI | 大模型文本数据提取实践&#xff08;理论篇&#xff09;-CSDN博客文章浏览阅读2次。glm4大模型数据处…

大数据-213 数据挖掘 机器学习理论 - KMeans Python 实现 距离计算函数 质心函数 聚类函数

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

【Pikachu】File Inclusion文件包含实战

永远也不要忘记能够笑的坚强&#xff0c;就算受伤&#xff0c;我也从不彷徨。 1.File Inclusion(文件包含漏洞)概述 File Inclusion(文件包含漏洞)概述 文件包含&#xff0c;是一个功能。在各种开发语言中都提供了内置的文件包含函数&#xff0c;其可以使开发人员在一个代码…

材质(二)——材质参数化,从源材质继承生成不同的材质实例

继承原材质&#xff0c;对外提供参数。 更改调制不同的参数&#xff0c;生成不同的材质实例。 类似于&#xff0c;类的继承。有一个基类Base.继承生成为子类 A_Base,B_Base,C_Base

java的面向对象(从入门到深入)

目录 一、基本概念&#xff1a; 1.类 2.对象 3.继承 4.多态 5.封装 6.方法 7.接口 8.抽象 二、深入概念&#xff1a; 三:总结 一、基本概念&#xff1a; 1.类 类就是一个一个东西的蓝图&#xff0c;里面有着它的属性和方法。 2.对象 对象是一个类的实例化。 3.继承…

FPGA实现串口升级及MultiBoot(六)ICAPE2原语实例讲解

本文目录索引 一个指令和三种方式通过ICAPE2原语添加ICAPE2 IP构建Golden位流工程MultiBoot位流工程验证example2总结代码缩略词索引: K7:Kintex 7V7:Vertex 7A7:Artix 7MB:MicroBlaze上一篇文章种总结了MultiBoot 关键技术,分为:一个指令、二种位流、三种方式、四样错误。针…

自动泊车端到端算法 ParkingE2E 介绍

01 算法介绍 自主泊车是智能驾驶领域中的一项关键任务。传统的泊车算法通常使用基于规则的方案来实现。因为算法设计复杂&#xff0c;这些方法在复杂泊车场景中的有效性较低。 相比之下&#xff0c;基于神经网络的方法往往比基于规则的方法更加直观和多功能。通过收集大量专家…

sealos部署K8s,安装docker时master节点突然NotReady

1、集群正常运行中&#xff0c;在集群master-1上安装了dockerharbor&#xff0c;却发现master-1节点NotReady&#xff0c;使用的网络插件为 Cilium #安装docker和harbor&#xff08;docker运行正常&#xff09; rootmaster-1:/etc/apt# apt install docker-ce5:19.03.15~3-0~u…