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还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备 ...
随机推荐
- Android的硬件抽象层模块编写规范
硬件抽象层模块编写规范 Android系统的硬件抽象层以模块的形式来管理各个硬件訪问接口.每个硬件模块都相应有一个动态链接库文件.这些动态链接库文件的命令须要符合一定的规范.同一时候,在系统内部. ...
- c++ 编译时检测结构体大小的的宏定义写法
一种写法: template <bool> struct CompileAssert { }; #define COMPILE_ASSERT(expr, msg) \ typedef Co ...
- Kettle资源库采用SQLserver数据库需要注意的点
Kettle开源ETL工具有着自己的元数据存储方式,可以分为两种 1:File 2:DB 文件存储我这里就不多说了,下面说一下在用SQLserver2008 R2作为资源库在创建的过程中遇到的问题 K ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- socketio server推送
假设面试官问你:要把server端的数据时时显示在浏览器上怎么实现?我想有非常多人会回答使用Ajax技术定时去訪问一个资源,没错,使用Ajax的确能实现.但面试官要的绝对不是这个答案. 由于使用Aja ...
- Python访问MongoDB数据库
#encoding: utf-8 __author__ = 'Administrator' #import pymongo from pymongo import MongoClient,GEO2D ...
- APP 打包測试流程 从零開始
前言: 苹果应用打包測试一直是件令人头疼的事.尤其是第一次打包的时候,因为苹果官网是全英文性且缺少仔细的步骤指引.刚開始学习的人往往要花费非常多时间去干一件三分钟就能搞定的事. 今天我们来透彻的解说一 ...
- Activex打包于发布完整版---ActiveX打包
前面介绍了数字证书的原理与制作:http://blog.csdn.net/jiangtongcn/article/details/13508365,下面来看一下ActiveX组件的打包. 我现在有一个 ...
- Mysql自己主动备份
Mysql自己主动备份 批处理命令: set"Ymd=%date:~,4%%date:~5,2%%date:~8,2%" set"hMs=%time:~,2%%time: ...
- MHDD修复硬盘坏道
2种修复的方法,本人已经尝试过,非常管用! 1.先按SHIFT+F3扫描硬盘连接并选择,按F4键,先用一般模式扫一遍,再用高级模式扫一变,具体方法是选择LBA模式,remap项OFF,Loop the ...