react-redux connect装饰器

安装babel-plugin-transform-decorators-legacy

npm i babel-plugin-transform-decorators-legacy --save-dev

在babel中配置：

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

vscode可以在项目根目录下添加jsconfig.json文件来消除代码警告

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

用装饰器改造一下

import React, {PureComponent} from 'react';
import { connect } from "react-redux";

@connect(mapStateToProps, mapDispatchToProps)
class index extends PureComponent {
//...
}
//获取指定state数据
function mapStateToProps(state) {
    //return ...
}
//触发action
function mapDispatchToProps(dispatch) {
    //return ...
}
export default index;

进一步改造，把connect单独拎出来

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

export default (action) => {
  return connect(
    state => state,
    dispatch => bindActionCreators(action, dispatch)
  )
}

import React, {PureComponent} from 'react';
import * as common from 'src/pages/action/home'
import connect from 'src/pages/action/common'


@connect(common)
class index extends PureComponent {
//...
}
export default index;