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

  1. JavaScript(基于react+dva)

    变量声明 const 和 let:分别表示常量和变量 模板字符串 const user = 'world'; console.log(`hello ${user}`); // hello world ...

  2. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

  3. React & Dva & Actions & dispatch & effects

    React & Dva & Actions & dispatch & effects dispatch https://dvajs.com/guide/introduc ...

  4. React dva 的使用

    各大传送门: DvaJS Github DvaJS API与示例 了解 dva- dva = React-Router + Redux + Redux-saga + fetch - dva的初衷是(其 ...

  5. React + Dva + Antd + Umi 概况

    Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...

  6. react dva 表单校验

    import React,{ Component } from 'react'; import { connect } from 'dva'; import { WhiteSpace,NavBar , ...

  7. React+dva+webpack+antd-mobile 实战分享(二)

    第一篇 https://segmentfault.com/a/11... 在上一篇文章中教给大家了怎么搭建项目的架子:那么今天我们就来说一下项目里的导航和列表的实现 导航 废话不说啦 下面直接给大家讲 ...

  8. 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 ...

  9. React+dva+webpack+antd-mobile 实战分享(一)

    再看本篇文章之前,本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目,因为现在dva和roadhog还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备 ...

随机推荐

  1. (转)NGUI制作转圈的技能CD特效

    在技能图标上面放个半透明的精灵,用来做技能冷却的特效,如下图所示,我就用NGUI中的图标来带代替. NGUI制作转圈的技能CD特效 然后修改一下特效的精灵类型,它是在技能图标上面悬浮半透明可旋转的精灵 ...

  2. 老三星手机i9001刷机记录

    家里的老的三星i9001,准备给我妈用,打算刷机,但又实在头疼那些复杂的刷机技术,昨天研究了一下,用比较简单的方法完成刷机,记录如下: 用卡刷比较简单,线刷不考虑 进入恢复模式的方法:1.电源+音量加 ...

  3. VS2008+Windows DDK 7的环境配置

    Mark offers some third party utilities. That's good, but I will show a more handy way (IMHO): how to ...

  4. [Node.js]26. Level 5 : Route rendering

    Instead of just writing out the quote to the response, instead render the quote.ejs template, passin ...

  5. UGUI 屏幕适配 导致 BoxCollider无效 解决记录

    从来没有做过一个完整的游戏,所以用UGUI来做个手游界的 " Hello World " - 微信打飞机.看起来easy做起来也碰到各种奇异的问题. 昨天导出安卓包之后,在我的MX ...

  6. Sticker.js生成图片或者页面元素“速干贴”效果

    ​在线演示 本地下载 真实的效果,真的非常好玩!

  7. leetCode 41.First Missing Positive (第一个丢失的正数) 解题思路和方法

    First Missing Positive  Given an unsorted integer array, find the first missing positive integer. Fo ...

  8. Oracle体系结构三(学习笔记)

  9. Autocomplete in ASP.NET MVC3自动检索并填充输入框

    1.单一产品情况下使用: public ActionResult GetStockList() { var item = _db.Stocks.ToList().Select(s =>s.Pro ...

  10. RAM调优之日志分析

    D/dalvikvm: <GC_Reason> <Amount_freed>, <Heap_stats>, <External_memory_stats> ...