本文共 3879 字，大约阅读时间需要 12 分钟。

模块开发之react-redux使用装饰器函数Decorator（九）

前言

这段时间一直搞前端模块开发，使用React框架，配置redux，中间使用react-redux框架连接。注意到在类上添加@符号，甚是不解，后来问其它人，才知道这是ES6新增装饰器函数。

可

装饰器函数Decorator

例子

@testableclass MyTestableClass {  // ...}function testable(target) {  target.isTestable = true;}MyTestableClass.isTestable // true

testable是一个函数，接收一个类做为对象，同时在类上添加一个静态对象，@testable修饰在类上，类当作参数传入装饰器函数里。

function testable(isTestable) {
     return function(target) {
       target.isTestable = isTestable;  }}@testable(true)class MyTestableClass {
   }MyTestableClass.isTestable // true

使用@符号放在类上，装饰器函数接收类做为第一个参数，可以对类做一些操作。这就是装饰器函数用来给附着的主体进行装饰，添加额外行为的一种方式。

修饰器本质就是编译时执行的函数，不是运行时执行的函数。

这里只介绍装饰器修饰在类上，其它的类属性和类方法里跳转链接自己学习。

react-redux里使用装饰器函数

安装依赖

使用label这个loader支持Decorator功能。

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

项目根目录的.babelrc文件里添加如下(若没有该文件则创建，注意使用dos命令)

{    "plugins": [        "transform-decorators-legacy"    ]}

这样我们就能在项目里使用装饰器函数了。

源始的connect使用方式

import { connect } from "react-redux";import { bindActionCreators } from "redux";import userAction from "../action/Action";//action creator路径，换成自己的。class MyReactComponent extends React.Component {
   }function mapStateToProps(state){
       return state;}function mapDispatchToProps(dispatch){
       return bindActionCreators(userAction,dispatch)}export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

userAction是一个action creator。下面的例子中模块引入省略。

最简单的connect装饰器函数

@connect(mapStateToProps, mapDispatchToProps)class MyReactComponent extends React.Component {
   }function mapStateToProps(state){
       return state;}function mapDispatchToProps(dispatch){
       return bindActionCreators(userAction,dispatch)}

或者更简洁的写法，使用Lambda表达式如下

@connect(state => state.user, dispatch => bindActionCreators(userAction, dispatch))class MyReactComponent extends React.Component {
   }

稍微复杂的方式

单独将connect(mapStateToProps, mapDispatchToProps)抽出来，存放在一个文件connect.js(名字随便取)中做为模块使用，在组件上直接使用@connect()即可。

//connect.jsimport { connect } from "react-redux";import { bindActionCreators } from "redux";import userAction from "../action/Action";const mapStateToProps = state => stateconst mapDispatchToProps = dispatch => bindActionCreators(userAction, dispatch)export default connect(mapStateToProps, mapDispatchToProps)//MyReactComponent.jsx//组件上import connect from './connect'@connectclass MyReactComponent extends React.Component {
   }

再高一级使用方式

假设redux的实例store维护的state对象中维护多个key和value，类似下面的

{main:{数据},user:{数据},role:{数据}...}

我们可以将创造connect装饰器函数再抽成一个模块函数，相当于装饰器函数的工厂。

//baseConnectFactory.j//函数工厂模块，可以接收数组import {connect} from 'react-redux'import {bindActionCreators} from 'redux'//stateKey是state里的key,action是传入的action creatorexport default (stateKey,action)=>connect (    state=>{        let s = {}        if(stateKey instanceof Array){            stateKey.forEach(k=>s[k]=state[k])        }else{            s=state[stateKey]        }        return s    },    dispatch=>{        let a = {}        if(action instanceof Array){            action.forEach(act=>a[act.name]=bindActionCreators(act,dispatch))        }else{            a = bindActionCreators(action,dispatch)        }        return a    })//MyReactComponentConnect.js//在需要使用装饰器的地方传入真实数据，构造装饰器函数import connect from './baseConnectFactory'//引入aseConnectFactory.js模块import userAction from '../user/action/Action'//引入action creator模块//导出装饰器函数export default connect (['main','user'],userAction)//MyReactComponent.jsx//组件上import connect from './MyReactComponentConnect'//直接使用装饰器@connectclass MyReactComponent extends React.Component {
   }

总结

react-redux的connect装饰器使用方法基本上都是以上的情况。掌握上面的例子，在看别人写的代码或自己写装饰器都随心所意。

转载地址：https://chenyuan.blog.csdn.net/article/details/80862567 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！