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

前言

这段时间一直在开发前端模块。React框架，配置redux，中间使用react-redux框架连接。注意在类上添加。@符号，很困惑，后来问别人，才知道这是ES6新装饰函数。
它是一种特殊类型的声明，可以附加到类声明、方法、参数或属性上。装饰由装饰品组成@符号接近函数名称。
但目前大多数浏览器和node装饰装饰装饰不支持环境，需要babel转低级JS代码。

可阮一峰的Decorator

---

装饰器函数Decorator

例子

@testable class 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(mapStateToProps, mapDispatchToProps)我们知道方法connect返回函数，该函数接收组件作为参数，可作为装饰函数。

源始的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是一个ction 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.js
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import userAction from "../action/Action";

const mapStateToProps = state => state
const mapDispatchToProps = dispatch => bindActionCreators(userAction, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)

//MyReactComponent.jsx
//组件上
import connect from './connect'
@connect
class 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 creator
export 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'
//直接使用装饰器
@connect
class MyReactComponent extends React.Component { 
       }

---

总结

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