react-redux中connect的装饰器用法@connect详解
最近在琢磨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那样，叫注解多好。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文介绍了如何模仿抖音发布页面,使用div元素作为输入框,并利用CSS样式和JavaScript动态操作DOM,实现类似于input输入框的功能,感兴趣的朋友跟随小编一起看看吧2024-10-10
React 进入页面后自动 focus 到某个输入框的解决方案
React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下2024-02-02
在 React 应用中,防抖（Debounce）技术可以有效地限制函数在短时间内的频繁调用,下面我们就来看看如何使用Lodash库中的debounce函数实现React表单提交中实现防抖功能吧2024-01-01
React路由看似只能由Route组件包裹组件的结构来构成,但是其实也可以通过编写路由数组配置然后通过数组循环来生成Route组件包裹组件的结构,所以本文给大家介绍了React根据配置生成路由的方法,需要的朋友可以参考下2024-11-11
react-router-domV6版本的路由和嵌套路由写法详解
本文主要介绍了react-router-domV6版本的路由和嵌套路由写法详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
React中使用echarts-for-react的方法示例
echarts-for-react则是ECharts在React生态中的官方封装组件,它让开发者能够轻松地在React应用中集成ECharts图表,本文就来介绍一下echarts-for-react的使用,感兴趣的可以了解一下2025-03-03
react的ui库antd中form表单使用SelectTree反显问题及解决
这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
React 组件的重复渲染是开发中常见的性能问题之一,尤其是在大型应用中,组件的频繁渲染会导致性能瓶颈,本文将探讨 React 组件重复渲染的常见原因,并提供优化策略,帮助开发者提升应用性能,需要的朋友可以参考下2025-03-03
众所周知 ,在业务开发中,无论用的什么框架,首先要熟悉项目搭建,路由配置和组件通信,所以我们今天要探究的就是React中组件通信的几种方式,快跟随小编一起学习起来吧2024-03-03
最新评论