AntDesign(React)学习-9 Dva model reducer实践
今天肺炎增长数字依然吓人,感觉穿越到丧失片里了。
本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码。
1、在src,models文件夹下创建user.ts,初始化username为张三1
const UserModel = {
namespace: 'User',
state:{
UserInfo:{
username:"张三1"
}
},
reducers:{
updateUserState(state,action)
{
let currentUser=state.UserInfo;
console.log("CurrentUser:"+currentUser);
console.log(currentUser);
console.log("CurrentUserPayload:")
console.log(action.payload.UserInfo);
state=action.payload;
return state;
}
}
};
export default UserModel;
注意:
红色部分如果写成
2、修改user.tsx如下
import React from 'react';
import { Button,Input} from 'antd';
import {connect} from 'dva'; class User extends React.Component {
render() {
console.log("render:");
console.log(this.props);
return (
<div>用户管理
<div>姓名:{this.props.UserInfo.username}</div>
<Button type="primary" style={{marginTop:10,width:300}} onClick={this.handleClick}>修改</Button>
</div>
);
}
handleClick = e => {
const userInfo={
UserInfo:{
username:"张三2"
}
}
this.props.dispatch({
type:"User/updateUserState",
payload:userInfo
})
console.log('click: ', e);
};
}
const getUserInfoFromState=(state)=>{
console.log(state);
return {UserInfo:state.User.UserInfo} }
export default connect(getUserInfoFromState)(User) ;
3、运行效果如下
4、点击修改后
5、console日志如下
AntDesign(React)学习-9 Dva model reducer实践的更多相关文章
- AntDesign(React)学习-10 Dva 与后台数据交互
明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- AntDesign(React)学习-14 使用UMI提供的antd模板
1.UMI提供了可视化antd模板,可以直接添加到项目中修改用 比如将个人中心添加到项目中 2.选择个人中心,确定 3.成功 4.打开项目 5.Route文件也自动添加 根路由有exact:true后 ...
- AntDesign(React)学习-5 路由及使用Layout布局
前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu ...
- AntDesign(React)学习-2 第一个页面
1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...
- AntDesign(React)学习-15 组件定义、connect、interface
虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...
- AntDesign(React)学习-13 Warning XX should not be prefixed with namespace XXX
有篇UMI入门简易教程可以看看:https://www.yuque.com/umijs/umi/hello 程序在点击操作时报了一个Warning: [sagaEffects.put] User/up ...
- AntDesign(React)学习-12 使用Table
AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...
随机推荐
- SQL中的real、float、decimal、numeric数据类型区别
概述: 浮点数据类型包括real型.float型.decimal型和numeric型.浮点数据类型用于存储十进制小数. 在SQL Server 中浮点数值的数据采用上舍入(Round up)的方式进行 ...
- BUUCTF 部分wp
目录 Buuctf crypto 0x01传感器 提示是曼联,猜测为曼彻斯特密码 wp:https://www.xmsec.cc/manchester-encode/ cipher: 55555555 ...
- 自动驾驶定位算法-直方图滤波(Histogram Filter)定位
1.直方图滤波(Histogram Filter)的算法思想 直方图滤波的算法思想在于:它把整个状态空间dom(x(t))切分为互不相交的部分\(b_1.b_2....,b_{n-1}\),使得: 然 ...
- 37.Python自定义过滤器
自定义模板过滤器 1.首先在某个app中,创建一个python包,叫做"templatetags",注意,这个包的名字一定要是"templatetags",否者 ...
- Docker--数据管理之Volumes
前言:我们知道docker容器内产生或修改的数据仅在该容器内有效,即容器关闭,其之前产生或修改的数据也就删除了,这明显不能满足我们大多数场景的需求.当然这只是默认,docker为我们提供了多种保存数据 ...
- ClrFromCSharp_2_2_生成部署打包应用程序
1,在\reps\CSharpFromCSarp\CSharpFromCSarp_2_2,建立新解决方案和解决项目 并且输入以下代码 namespace ClrFromCSharp_2_2 { cla ...
- centos7系统中忘记了root管理员账号密码的解决方式
随着计算机的使用越来越普遍,现在的用户都会有多个密码,不是这软件的密码就是那个的,QQ.邮箱.游戏,还有系统的登录密码!每一个密码都不一样!所以越来越多的密码需要去记住!也因为这样,只要其中一个长时间 ...
- java控制台模式控制光标及字符颜色
System.out.println("\033[47;31mhello world\033[5m"); 47是字背景颜色, 31是字体的颜色, hello world是字符串. ...
- 斯坦福发布2019全球AI报告:中国论文数量超美国,自动驾驶汽车领域获投资最多
近日,斯坦福联合MIT.哈佛.OpenAI等院校和机构发布了一份291页的<2019年度AI指数报告>. 这份长达291页的报告从AI的研究&发展.会议.技术性能.经济.教育.自动 ...
- 吴裕雄--天生自然HADOOP操作实验学习笔记:使用hive操作hbase
实验目的 熟悉hive和hbase的操作 熟悉hadoop.hbase.hive.zookeeper的关系 熟练大数据环境的搭建 学会分析日志排除问题 实验原理 1.hive整合hbase原理 前面大 ...