react-redux中启用es7@装饰器

作者: MJ 分类: react 发布时间: 2019-06-17 17:26

我们平时在用react-redux的时候会用到connect去连接组件的state和action,大概长这个样子:

import { connect } from 'react-redux';
class Counter extends Component{}
const mapStateToProps = (state)=>{
    return {
        counter:state.counter
    }
}
const mapDispatchToProps = (dispatch) => {
    return{
        jia:() =>{
            dispatch(jia());
        },
        jian:() => {
            dispatch(jian());
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter);

其实上边的写法还有很多对应的优化,请参考:https://www.love85g.com/?p=1595

我们用ES7的@装饰器来优化一下:

安装模块:

yarn add babel-plugin-transform-decorators-legacy

根目录下新增.babelrc文件,如果Babel >= 7.x使用:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ]
}

旧版的使用:

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

详细配置参考官网:https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy

然后使用方式如下:

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
@connect(
    state => ({counter:state.counter}),
    dispatch => bindActionCreators(types,dispatch)
)
class Counter extends Component{}
export default Counter;

还有用的比较多的就是 @withRouter。

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注