react dva 的 connect 与 @connect
https://dvajs.com/guide/introduce-class.html#connect-方法
connect的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能,譬如dispatch
connect 的使用
【connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State。
connect 方法传入的第一个参数是 mapStateToProps 函数,该函数需要返回一个对象,用于建立 State 到 Props 的映射关系。】
简而言之,connect接收一个函数,返回一个函数。
第一个函数会注入全部的models,你需要返回一个新的对象,挑选该组件所需要的models。
export default connect(({ user, login, global = {}, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices
}))(BasicLayout); // 简化版
export default connect(
({ user, login, global = {}, loading }) => {
return {
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices
}
}
)(BasicLayout);
@connect的使用
其实只是connect的装饰器、语法糖罢了。
// 将 model 和 component 串联起来
export default connect(({ user, login, global = {}, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices,
menuData: login.menuData, // by hzy
redirectData: login.redirectData, // by hzy
}))(BasicLayout);
// 改为这样(export 的不再是connect,而是class组件本身。),也是可以执行的,但要注意@connect必须放在export default class前面:
// 将 model 和 component 串联起来
@connect(({ user, login, global = {}, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices,
menuData: login.menuData, // by hzy
redirectData: login.redirectData, // by hzy
})) export default class BasicLayout extends React.PureComponent {
// ...
}
react dva 的 connect 与 @connect的更多相关文章
- JavaScript(基于react+dva)
变量声明 const 和 let:分别表示常量和变量 模板字符串 const user = 'world'; console.log(`hello ${user}`); // hello world ...
- react+dva 全局model中异步获取数据state在组件中取不到值
先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...
- React & Dva & Actions & dispatch & effects
React & Dva & Actions & dispatch & effects dispatch https://dvajs.com/guide/introduc ...
- React dva 的使用
各大传送门: DvaJS Github DvaJS API与示例 了解 dva- dva = React-Router + Redux + Redux-saga + fetch - dva的初衷是(其 ...
- React + Dva + Antd + Umi 概况
Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...
- react dva 表单校验
import React,{ Component } from 'react'; import { connect } from 'dva'; import { WhiteSpace,NavBar , ...
- React+dva+webpack+antd-mobile 实战分享(二)
第一篇 https://segmentfault.com/a/11... 在上一篇文章中教给大家了怎么搭建项目的架子:那么今天我们就来说一下项目里的导航和列表的实现 导航 废话不说啦 下面直接给大家讲 ...
- react+dva+antd+umi项目建立操作流程及知识点总结
0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...
- React+dva+webpack+antd-mobile 实战分享(一)
再看本篇文章之前,本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目,因为现在dva和roadhog还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备 ...
随机推荐
- (转)NGUI制作转圈的技能CD特效
在技能图标上面放个半透明的精灵,用来做技能冷却的特效,如下图所示,我就用NGUI中的图标来带代替. NGUI制作转圈的技能CD特效 然后修改一下特效的精灵类型,它是在技能图标上面悬浮半透明可旋转的精灵 ...
- 老三星手机i9001刷机记录
家里的老的三星i9001,准备给我妈用,打算刷机,但又实在头疼那些复杂的刷机技术,昨天研究了一下,用比较简单的方法完成刷机,记录如下: 用卡刷比较简单,线刷不考虑 进入恢复模式的方法:1.电源+音量加 ...
- VS2008+Windows DDK 7的环境配置
Mark offers some third party utilities. That's good, but I will show a more handy way (IMHO): how to ...
- [Node.js]26. Level 5 : Route rendering
Instead of just writing out the quote to the response, instead render the quote.ejs template, passin ...
- UGUI 屏幕适配 导致 BoxCollider无效 解决记录
从来没有做过一个完整的游戏,所以用UGUI来做个手游界的 " Hello World " - 微信打飞机.看起来easy做起来也碰到各种奇异的问题. 昨天导出安卓包之后,在我的MX ...
- Sticker.js生成图片或者页面元素“速干贴”效果
在线演示 本地下载 真实的效果,真的非常好玩!
- leetCode 41.First Missing Positive (第一个丢失的正数) 解题思路和方法
First Missing Positive Given an unsorted integer array, find the first missing positive integer. Fo ...
- Oracle体系结构三(学习笔记)
- Autocomplete in ASP.NET MVC3自动检索并填充输入框
1.单一产品情况下使用: public ActionResult GetStockList() { var item = _db.Stocks.ToList().Select(s =>s.Pro ...
- RAM调优之日志分析
D/dalvikvm: <GC_Reason> <Amount_freed>, <Heap_stats>, <External_memory_stats> ...