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还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备 ...
随机推荐
- kafka基本原理概述——patition与replication分配
kafka一直在大数据中承受着数据的压力也扮演着对数据维护转换的角色,下面重点介绍kafka大致组成及其partition副本的分配原则: 文章参考:http://www.linkedkeeper.c ...
- 红米NOTE应用闪退(包括系统设置等各种界面)问题解决经历
关机状态下同时按减音量按钮和开机按钮,进入一个菜单,选择recovery(减音量键是移动,加音量键是确定),当出现一个倒地的机器人的时候,稍待片刻按开机键会出现双清以及刷机菜单.wipe data/f ...
- Ofstream的endl不好用怎么回事?
用endl,std::endl, "\n"都不好用,不输出换行,怎么回事? [解决方法] If you're writing a text file, you shouldn't ...
- 30款免费的手机UI设计资源
在 原型设计阶段,我们会尽量寻找一些灵感刺激大脑,从而让我们的想象力飞-灵感给了我们很好的开始,但是当我们把灵感化为现实的时候,又需要一些实用而又高 效的组件来完成.即使你有非常善于把灵感实例化在草稿 ...
- ZH奶酪:putty远程登录Linux服务器非常慢
11.pytty远程登录Linux服务器非常慢 http://www.it165.net/os/html/201209/3425.html 12.启动SSHD服务报错 http://blog.chin ...
- iOS日期加减
- (NSDate *)jsDateFromBeginDate:(NSDate *)beginDate todays:(int)days { NSDate *dateTemp = [[NSDate a ...
- PL/SQL之DBMS_SQL程序包使用(1)(学习笔记)
dbms_sql程序包dbms_sql程序包是系统提供给我们的另一种使用动态SQL的方法:使用DBMS_SQL包实现动态的SQL的步骤如下:1.将要执行的SQL语句或者一个语句放到一个字符串变量中2. ...
- C++调用Java的Jar包
一个简单需求:用C++调用Jar包. 实现基本思路:调用CreateProcess API来启动cmd.exe执行jar包. 调用类CJarAppCall. JarAppCall.h #pragma ...
- [转载]windows7中没用boot.ini文件而是改用BCDEDIT来配置了
原文地址:windows7中没用boot.ini文件而是改用BCDEDIT来配置了作者:开心骝哥 本人安装的Win7,因为机上有两个系统,一个dos系统,一个win7系统,开机时总是会在系统选择的界面 ...
- 更新开源库到pods上时报CocoaPods was not able to update the `master` repo的解决办法
今天在更新我的开源库到pods上时,使用以下命令时,报错了... pod trunk push SwiftPopMenu.podspec 错误内容: CocoaPods was not able to ...