深入浅出之React-redux中connect的装饰器用法@co…
2018-12-19 01:45:01来源：博客园 阅读 ()
这篇文章主要介绍了react-redux中connect的装饰器用法@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) }//欢迎加入前端全栈开发交流圈一起学习交流：864305860 export default connect(mapStateToProps,mapDispatchToProps)(App)
这样并没有什么问题。看着connect的用法，有没有觉得很熟悉？典型的wrapper嘛，这里必须拿装饰器来装X，稍微改一改：
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> }//欢迎加入前端全栈开发交流圈一起学习交流：864305860 }
emmm,这样舒服很多了，在我们实际项目中，可能是一个模块下面又有很多个小组件，它们都共用同样的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)
)//欢迎加入前端全栈开发交流圈一起学习交流：864305860
然后在需要用到的组件中这么用：
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> } }//欢迎加入前端全栈开发交流圈一起学习交流：864305860
这样就ok了，和最开始的用法比起来，是不是明显更装X更好用？
需要说明的是，这里用了装饰器，需要安装模块babel-plugin-transform-decorators-legacy，然后在babel中配置：
{
"plugins":[
"transform-decorators-legacy"
]
}//欢迎加入前端全栈开发交流圈一起学习交流：864305860
如果你用的是vscode, 可以在项目根目录下添加jsconfig.json文件来消除代码警告：
{
"compilerOptions": {
"experimentalDecorators": true
}
}//欢迎加入前端全栈开发交流圈一起学习交流：864305860
结语
感谢您的观看，如有不足之处，欢迎批评指正。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 分享connect中间件session、cookie的使用方法 2019-12-10
- 前端笔记之React（五）Redux深入浅出 2019-08-14
- react-redux源码解析 2018-06-24
- 深入浅出理解同步 /异步/并发/并行/串行 2018-06-24
- socket.io 出现的WebSocket is closed before the connectio 2018-06-24
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
