在react中用装饰器来装饰connect

Posted datiangou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在react中用装饰器来装饰connect相关的知识,希望对你有一定的参考价值。

假设我们在react中有如下header组件:


import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import actions from './actions';
class Header extends PureComponent{
  render(){
    return (
      <div>这是个组件</div>
    )
  }
}

const mapStateToProps = state => ({
  todos:state.todos
})

const mapDispatchToProps = dispatch => ({
  setTodos:value=>dispatch(actions.setTodos(value))
})

export default connect(mapStateToProps,mapDispatchToProps)(Header)

我们在写react组件时结合redux要定义mapStateToProps和mapDispatchToProps两个返回对象的纯函数以便交给connect去包裹使用 具体connect使用查看connect

这里我们就可以用装饰器(Decorator)来改写下:


import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import actions from './actions';

@connect(
  state=>({
    todos:state.todos
  }),
  dispatch=>({
    setTodos:value=>dispatch(actions.setTodos(value))
  })
)
class Header extends PureComponent{
  render(){
    return (
      <div>这是个组件</div>
    )
  }
}

export default Header

如此,改造完成,代码看上去也比改造前的干净整洁了

但是由于装饰器的兼容性问题我们需要使用babel来转换

// 安装babel插件 yarn add @babel/plugin-proposal-decorators

修改package.json下的babel


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

最后一步
根目录下新建jsconfig.json解决编辑器报错问题


{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

然后就可以愉快的coding了

来源:https://segmentfault.com/a/1190000017338904


以上是关于在react中用装饰器来装饰connect的主要内容,如果未能解决你的问题,请参考以下文章

代码缺乏装饰?使用ts装饰器来装饰你的代码

代码缺乏装饰?使用ts装饰器来装饰你的代码

代码缺乏装饰?使用ts装饰器来装饰你的代码

代码缺乏装饰?使用ts装饰器来装饰你的代码

为啥 Python 中没有 @override 装饰器来帮助提高代码的可读性? [关闭]

如何创建一个装饰器来装饰生成器函数? [关闭]