redux 配置@connect()装饰器

package.json

"dependencies": {
	"@babel/plugin-proposal-decorators": "^7.12.1",
	"@craco/craco": "^5.8.0",
	"craco-less": "^1.17.0",
}
"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test"
 },

craco.config.js

const CracoLessPlugin = require("craco-less");

module.exports = {
  babel: {
    //支持装饰器
    plugins: [["@babel/plugin-proposal-decorators", {legacy: true}]]
  },
  plugins: [
    {
      plugin: CracoLessPlugin
    }
  ]
};

使用：

import { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

@connect(
  // mapStateToProps 把state映射到props
  ({count}) => ({count}),
  // mapDispatchToProps object| function 把Dispatch映射到props
  // {add: () => ({type: "ADD"}), minus: () => ({type: "MINUS"})}
  dispatch => {
    let creators = {
      add: () => ({type: "ADD"}),
      minus: () => ({type: "MINUS"})
    };
    creators = bindActionCreators(creators, dispatch);
    return {dispatch, ...creators};
  }
)
class ReactReduxPage extends Component {
  render() {
    const {count, dispatch, add, minus} = this.props;
    return (<div>...<div>)
  }
}