最近在琢磨中反应的一些小技巧,这篇文章记录一下在回家的中用装饰器来写连接。
,通常我们需要一个减速器和一个行动,然后使用连接来包裹你的组件。假设你已经有一个键为主要的减速器和一个action.js。我们的App.js一般都这么写:
从“反应”进口的反应
从“react-dom”进口{呈现}
从“react-redux”进口{连接}
从“终极版”进口{bindActionCreators}
从“action.js”进口操作
类应用扩展React.Component {
呈现(){
返回& lt; div> hello</div>
}
}
函数mapStateToProps(状态){
返回state.main
}
函数mapDispatchToProps(调度){
返回bindActionCreators(行动,派遣)
}
导出默认连接(mapStateToProps mapDispatchToProps)(应用)
之前
好了,这样并没有什么问题。看着连接的用法,有没有觉得很熟悉?典型的包装器嘛,这里必须拿装饰器来装一波啊,稍微改改:
从“反应”进口的反应
从“react-dom”进口{呈现}
从“react-redux”进口{连接}
从“终极版”进口{bindActionCreators}
从“action.js”进口操作
@connect (
状态=祝辞state.main,
调度=祝辞bindActionCreators(行动,派遣)
)
类应用扩展React.Component {
呈现(){
返回& lt; div> hello</div>
}
}
之前
装完了,看起来舒服了。在我们实际项目中,可能是一个模块下面又有很多个小组件,它们都共用同样的行动和减速器,我们在每个组件中都这么写,是不是有点太麻烦了?冗余代码太多了。
其实是可以把连接抽取出来的,比如写一个connect.js:
从“react-redux”进口{连接}
从“终极版”进口{bindActionCreators}
从“action.js”进口操作
出口默认连接(
状态=祝辞state.main,
调度=祝辞bindActionCreators(行动,派遣)
)
之前
然后在需要用到的组件中这么用:
从“反应”进口的反应
从“react-dom”进口{呈现}
从“connect.js”进口连接
@connect
出口的默认类应用扩展React.Component {
呈现(){
返回& lt; div> hello</div>
}
}
之前
这样就好了,和最开始的用法比起来,是不是明显更装逼更好用?
需要说明的是,这里用了装饰器,需要安装模块babel-plugin-transform-decorators-legacy,然后在巴别塔中配置:
{
“插件”:(
“transform-decorators-legacy”
]
}
如果你用的是vscode,可以在项目根目录下添加jsconfig.json文件来消除代码警告:
{
" compilerOptions ": {
“experimentalDecorators”:真的
}
}
好了,到这里真的完了。其实关于连接,是可以继续琢磨的,比如可以写一个通用的连接,所有的模块中所有的组件都可以用的那种,本文就不继续写下去了,以后有机会再写。
我一直觉得js里面把@这玩意儿叫装饰器不好,太难听了,像java那样,叫注解多好。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
