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. kafka基本原理概述——patition与replication分配

    kafka一直在大数据中承受着数据的压力也扮演着对数据维护转换的角色,下面重点介绍kafka大致组成及其partition副本的分配原则: 文章参考:http://www.linkedkeeper.c ...

  2. 红米NOTE应用闪退(包括系统设置等各种界面)问题解决经历

    关机状态下同时按减音量按钮和开机按钮,进入一个菜单,选择recovery(减音量键是移动,加音量键是确定),当出现一个倒地的机器人的时候,稍待片刻按开机键会出现双清以及刷机菜单.wipe data/f ...

  3. Ofstream的endl不好用怎么回事?

    用endl,std::endl, "\n"都不好用,不输出换行,怎么回事? [解决方法] If you're writing a text file, you shouldn't ...

  4. 30款免费的手机UI设计资源

    在 原型设计阶段,我们会尽量寻找一些灵感刺激大脑,从而让我们的想象力飞-灵感给了我们很好的开始,但是当我们把灵感化为现实的时候,又需要一些实用而又高 效的组件来完成.即使你有非常善于把灵感实例化在草稿 ...

  5. ZH奶酪:putty远程登录Linux服务器非常慢

    11.pytty远程登录Linux服务器非常慢 http://www.it165.net/os/html/201209/3425.html 12.启动SSHD服务报错 http://blog.chin ...

  6. iOS日期加减

    - (NSDate *)jsDateFromBeginDate:(NSDate *)beginDate todays:(int)days { NSDate *dateTemp = [[NSDate a ...

  7. PL/SQL之DBMS_SQL程序包使用(1)(学习笔记)

    dbms_sql程序包dbms_sql程序包是系统提供给我们的另一种使用动态SQL的方法:使用DBMS_SQL包实现动态的SQL的步骤如下:1.将要执行的SQL语句或者一个语句放到一个字符串变量中2. ...

  8. C++调用Java的Jar包

    一个简单需求:用C++调用Jar包. 实现基本思路:调用CreateProcess API来启动cmd.exe执行jar包. 调用类CJarAppCall. JarAppCall.h #pragma ...

  9. [转载]windows7中没用boot.ini文件而是改用BCDEDIT来配置了

    原文地址:windows7中没用boot.ini文件而是改用BCDEDIT来配置了作者:开心骝哥 本人安装的Win7,因为机上有两个系统,一个dos系统,一个win7系统,开机时总是会在系统选择的界面 ...

  10. 更新开源库到pods上时报CocoaPods was not able to update the `master` repo的解决办法

    今天在更新我的开源库到pods上时,使用以下命令时,报错了... pod trunk push SwiftPopMenu.podspec 错误内容: CocoaPods was not able to ...