react-redux中connect的装饰器用法@connect详解


Posted in Javascript onJanuary 13, 2018

最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect。

 通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component。假设你已经有一个key为main的reducer和一个action.js. 我们的App.js一般都这么写:

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

class App extends React.Component{
  render(){
    return <div>hello</div>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

ok了,这样并没有什么问题。看着connect的用法,有没有觉得很熟悉?典型的wrapper嘛,这里必须拿装饰器来装一波啊,稍微改改:

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

@connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
  render(){
    return <div>hello</div>
  }
}

装完了,看起来舒服了。在我们实际项目中,可能是一个模块下面又有很多个小组件,它们都共用同样的action和reducer,我们在每个组件中都这么写,是不是有点太麻烦了?冗余代码太多了。

其实是可以把connect抽取出来的,比如写一个connect.js:

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

export default connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)

然后在需要用到的组件中这么用:

import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'

@connect
export default class App extends React.Component{
  render(){
    return <div>hello</div>
  }
}

这样就ok了,和最开始的用法比起来,是不是明显更装逼更好用?

需要说明的是,这里用了装饰器,需要安装模块babel-plugin-transform-decorators-legacy,然后在babel中配置:

{
  "plugins":[
    "transform-decorators-legacy"
  ]
}

如果你用的是vscode, 可以在项目根目录下添加jsconfig.json文件来消除代码警告:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

ok了,到这里真的完了。其实关于connect,是可以继续琢磨的,比如可以写一个通用的connect,所有的模块中所有的组件都可以用的那种,本文就不继续写下去了,以后有机会再写。

我一直觉得js里面把@ 这玩意儿叫装饰器不好,太难听了,像java那样,叫注解多好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 #Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 #Javascript
vuejs实现递归树型菜单组件
Jan 13 #Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 #Javascript
详解基于vue-cli配置移动端自适应
Jan 13 #Javascript
javascript用rem来做响应式开发
Jan 13 #Javascript
深入理解ES6之数据解构的用法
Jan 13 #Javascript
You might like
php csv操作类代码
2009/12/14 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python迭代器实例简析
2014/09/25 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
小学生班会演讲稿
2014/01/09 职场文书
园艺师求职信
2014/03/10 职场文书
司法建议书范文
2014/05/13 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
vue实现拖拽交换位置
2022/04/07 Vue.js
python井字棋游戏实现人机对战
2022/04/28 Python