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传值取值的更多相关文章

  1. Mvc4_传值取值应用

    Mvc路由运行机制:   首先,Web 浏览器向服务器发送一条URL 请求,如http://HostName/ControllerName/ActionName/Parameters. 其次,请求被A ...

  2. 微信小程序 传值取值的方法总结

    微信小程序 传值取值的几种方法总结 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及 ...

  3. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  4. WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性和超链接点击弹出警示框

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值方式: href="地址?key=v ...

  5. 微信小程序传值取值的几种方法

    一,列表index下的取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1生成值 < ...

  6. react中map循环中key取值问题

    数组中没有唯一的key,可以定义变量,拼接字符串连接. let i = 0; key={`infoItem-col-${i++}`}

  7. session传值取值

    protected void Page_Load(object sender, EventArgs e) { //判断session是否为空 if (Session["user"] ...

  8. 怎么掌握微信小程序的取值、传值、数据存储

    小程序界面设定如下 父级页面:A界面 子级页面:B界面 异级页面:C界面 一.本页面取值(A界面→A界面) a.例如:input输入文字获取到value(键盘输入时触发) wxml: <inpu ...

  9. ASP.NET GridView HyperLinkField传值和取值【转】

    来源:http://www.cnblogs.com/junjie94wan/archive/2011/08/17/2143623.html 经常做Winform程序,好久没有做WEB都有些生疏了,Gr ...

随机推荐

  1. 步步为营-84-数字转化为金额的Js+enter键取消页面刷新

    说明:来不及细说了,老铁快上车 function fmoney(s, n) { console.log(s); n = n > && n <= ? n : ; s = pa ...

  2. LVS(IPVS)了解

    从来都只是看文章,现在手工作一下. 参考URL: https://blog.csdn.net/langyue919/article/details/80935197 https://www.cnblo ...

  3. [转] whistle--全新的跨平台web调试工具

    whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler+Willow,基于Java实现的Charles,及公司同事基于Node实现的Livepoo ...

  4. photoshop CC智能切图

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  5. python之多线程 queue 实践 筛选有效url

    0.目录 1.背景 某号码卡申请页面通过省份+城市切换归属地,每次返回10个号码. 通过 Fiddler 抓包确认 url 关键参数规律: provinceCode 两位数字 cityCode 三位数 ...

  6. Shell文本处理四剑客

    5.1 [grep] 全面搜索正则表达式(GREP)是一种强大的文本搜索工具,能使用正则 表达式搜索文本,并把匹配的行打印出来 过滤来自一个文件或标准输入匹配模式内容 除了grep外,还有egrep, ...

  7. net core体系-web应用程序-4asp.net core2.0 项目实战(1)-5项目数据库操作封装操作-EF框架

    EF框架有三种基本的方式:DB First(数据库优先),Model First(模型优先),Code First(代码优先). Entity Framework4.1之前EF支持“Database  ...

  8. php通过CURL模拟get提交请求

    方式一: $host = "http://jisunews.market.alicloudapi.com"; $path = "/news/get"; $met ...

  9. VM VirtualBox – Cannot register the hard disk

    第一打开VirtualBox 文件夹,在地址栏输入cmd 第二, 仔细读下面 VBoxManage.exe  internalcommands  sethduuid  "F:\Virtual ...

  10. IntelliJ IDEA 插件 阿里巴巴Java开发手册(Alibaba Java Coding Guidelines)

    以前看到过个:Java开发手册(阿里巴巴-公开版),这是个pdf文档,里面描述了一些Java开发的规约,里面确实有很多好用的规约,要是在学校就有机会看看的话,那么,在毕业之后,实际工作中就会少很多坑. ...