React使用DVA本地state传值取值
React使用DVA本地state传值取值
最近在用Ant Pro 做一个后台系统,在使用中发现Antd Pro使用DVA来实现
redux+sagas+router
一系列的功能,比传统方式要方便快捷的多,自己研究了其中一些原理,在此贴上代码供别人参考也给自己做个记录,
需要取值的页面
index.js
import { connect } from 'dva';
//这里是一个语法糖,和传统的connect()()作用一样。即把对应models目录下的state取出与本页的变量关联。
@connect(({ chart, loading, global = {} }) => ({ //其中global={}表示global中的所有state
chart, //等同chart:chart,ES6语法。
weather: global.weather, //读取原有的state,即models中的global.js文件中的weather
city: global.city
loading: loading.effects['chart/fetch'], //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))
export default class XXX extends Component {
...
render(){
const { chart, loading, weather, city } = this.props; //在这可用'this.props'读取
}
}
含有state值的页面
chart.js
export default {
namespace: 'chart',
state: {
......
},
effects: { //这里相当于是redux
*fetch(_, { call, put }) {
const response = yield call(fakeChartData); //这里的fakeChartData是一个request请求
yield put({
type: 'save',
payload: response,
});
},
......
},
}
global.js
export default {
namespace: 'global',
state: {
collapsed: true,
notices: [],
city: "郑州市",
weather: {},
mapView: "city",
},
.......
}
React使用DVA本地state传值取值的更多相关文章
- Mvc4_传值取值应用
Mvc路由运行机制: 首先,Web 浏览器向服务器发送一条URL 请求,如http://HostName/ControllerName/ActionName/Parameters. 其次,请求被A ...
- 微信小程序 传值取值的方法总结
微信小程序 传值取值的几种方法总结 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及 ...
- 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...
- WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性和超链接点击弹出警示框
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值方式: href="地址?key=v ...
- 微信小程序传值取值的几种方法
一,列表index下的取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1生成值 < ...
- react中map循环中key取值问题
数组中没有唯一的key,可以定义变量,拼接字符串连接. let i = 0; key={`infoItem-col-${i++}`}
- session传值取值
protected void Page_Load(object sender, EventArgs e) { //判断session是否为空 if (Session["user"] ...
- 怎么掌握微信小程序的取值、传值、数据存储
小程序界面设定如下 父级页面:A界面 子级页面:B界面 异级页面:C界面 一.本页面取值(A界面→A界面) a.例如:input输入文字获取到value(键盘输入时触发) wxml: <inpu ...
- ASP.NET GridView HyperLinkField传值和取值【转】
来源:http://www.cnblogs.com/junjie94wan/archive/2011/08/17/2143623.html 经常做Winform程序,好久没有做WEB都有些生疏了,Gr ...
随机推荐
- 步步为营-84-数字转化为金额的Js+enter键取消页面刷新
说明:来不及细说了,老铁快上车 function fmoney(s, n) { console.log(s); n = n > && n <= ? n : ; s = pa ...
- LVS(IPVS)了解
从来都只是看文章,现在手工作一下. 参考URL: https://blog.csdn.net/langyue919/article/details/80935197 https://www.cnblo ...
- [转] whistle--全新的跨平台web调试工具
whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler+Willow,基于Java实现的Charles,及公司同事基于Node实现的Livepoo ...
- photoshop CC智能切图
网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...
- python之多线程 queue 实践 筛选有效url
0.目录 1.背景 某号码卡申请页面通过省份+城市切换归属地,每次返回10个号码. 通过 Fiddler 抓包确认 url 关键参数规律: provinceCode 两位数字 cityCode 三位数 ...
- Shell文本处理四剑客
5.1 [grep] 全面搜索正则表达式(GREP)是一种强大的文本搜索工具,能使用正则 表达式搜索文本,并把匹配的行打印出来 过滤来自一个文件或标准输入匹配模式内容 除了grep外,还有egrep, ...
- net core体系-web应用程序-4asp.net core2.0 项目实战(1)-5项目数据库操作封装操作-EF框架
EF框架有三种基本的方式:DB First(数据库优先),Model First(模型优先),Code First(代码优先). Entity Framework4.1之前EF支持“Database ...
- php通过CURL模拟get提交请求
方式一: $host = "http://jisunews.market.alicloudapi.com"; $path = "/news/get"; $met ...
- VM VirtualBox – Cannot register the hard disk
第一打开VirtualBox 文件夹,在地址栏输入cmd 第二, 仔细读下面 VBoxManage.exe internalcommands sethduuid "F:\Virtual ...
- IntelliJ IDEA 插件 阿里巴巴Java开发手册(Alibaba Java Coding Guidelines)
以前看到过个:Java开发手册(阿里巴巴-公开版),这是个pdf文档,里面描述了一些Java开发的规约,里面确实有很多好用的规约,要是在学校就有机会看看的话,那么,在毕业之后,实际工作中就会少很多坑. ...