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;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容