用装饰器的方法替换react-redux

用babel-plugin-transform-decorators-legacy . babel-plugin-transform-decorators插件替换connect

https://www.jianshu.com/p/2dca3fb17139 这是以前的写法

// 获得数据
const mapStateToProps = (state) => {
    return {num: state}
}
// 获得方法,方法是上面倒入的 //将action的所有方法绑定到props上
const mapDispatchToProps = {addGum, addGumAsync}
// connect 第一个是获得数据源，第二个是获得方法源
Test1 = connect(mapStateToProps, mapDispatchToProps)(Test1)
export default Test1

下载上面的插件之后需要在webpack里面配置插件

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ],
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

"import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }这里是配置antd-mobile按需加载

,
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]  这里是支持上面插件的
    

上面条件满足之后

import React, {Component} from 'react'
import {Button} from 'antd-mobile'
import {connect} from 'react-redux'
import {addGum, addGumAsync} from "../index.redux";
@connect(
// 你需要啥属性放到state里面
    state=>({num: state}),
    {
        addGum,addGumAsync //你需要啥方法放到这里
    }
)
class Test1 extends Component {
    render() {
        let num = this.props.num
        return (
            <div className="test01">
                <p>{num}</p>
                <Button onClick={this.props.addGum}>add</Button>
                <Button onClick={this.props.addGumAsync}>延迟增加</Button>
            </div>
        )
    }
}
export default Test1