8.react-redux中connect的装饰器用法

最新推荐文章于 2023-01-05 09:54:55 发布

转载最新推荐文章于 2023-01-05 09:54:55 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016697985

文章标签：

#javascript #ViewUI

本文介绍在React项目中如何使用装饰器简化Redux连接组件的过程，通过示例代码展示如何利用装饰器提升代码逼格，减少冗余，提高开发效率。

最近在学习react中的数据状态的管理，也就是redux，react-redux 通常我们要使用redux的时候，我们会写一个reducer和一个action,然后使用connect来包裹你的Component,如下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 world</div>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

这样并没有什么问题。看着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>
  }
}

看这样是不是逼格更高了点,在实际的开发中,可以将connect抽出来单独写一个模块方便调用，减少代码冗余
需要说明的是，这里用了装饰器，需要安装模块babel-plugin-transform-decorators-legacy，然后在babel中配置：

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