react 增加@connect装饰器

@connect 安装配置

1 . npm run eject
2 . npm install babel-plugin-transform-decorators-legacy --save-dev
npm install @babel/plugin-proposal-decorators --save-dev
3 . 在package.json中配置babel，添加如下代码：

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

react 增加@connect装饰器
vscode 中如果存在报错，解决办法：

点击Visual Studio Code 文件 -》首选项 -》配置 -》用户设置，在搜索框内输入“experimentalDecorators”，把选项勾上
react 增加@connect装饰器

使用@connect

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from '../redux/actions'

@connect(
    state=>({value: state.test}),
    {increment,decrement}
)

class Counter extends Component {
    onIncrease() {
        this.props.increment(5);
    }
    onDecrement() {
        this.props.decrement(3);
    }
    render() {
        const { value } = this.props;
        return (
            <div>
                Test: 测试{value}
                <button onClick={this.onIncrease.bind(this)}>增加1</button>
                <button onClick={this.onDecrement.bind(this)}>减少1</button>
            </div>
        );
    }
}

export default Counter;