假設我們在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