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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
子页向父页传值示例
Nov 27 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
JS 事件机制完整示例分析
Jan 15 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网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python3 实现的人人影视网站自动签到
2016/06/19 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python实现猜拳小游戏
2020/04/05 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python脚本后台执行方式
2019/12/21 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python求凸包及多边形面积教程
2020/04/12 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
高级电工工作职责
2013/11/21 职场文书
打架检讨书300字
2014/02/02 职场文书
人事任命书怎么写
2014/06/05 职场文书
学期个人自我总结
2015/02/13 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android