目前在研讨react中的一些小技巧,这篇小说记录一下在redux中用装饰器来写connect。


平日我们需要一个reducer和一个action,然后使用connect来包裹你的Component。即便你早就有一个key为main的reducer和一个action.js.
我们的App.js一般都这么写:

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

class App extends React.Component{
    render(){
        return <div>hello</div>
    }
}
function mapStateToProps(state){
    return state.main
}
function mapDispatchToProps(dispatch){
    return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)


ok了,这样并从未什么样问题。看着connect的用法,有没有认为很熟练?典型的wrapper嘛,这里不可不拿装饰器来装一波哟,稍微改改:

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

@connect(
  state=>state.main,
  dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
    render(){
        return <div>hello</div>
    }
}


装完了,看起来舒服了。在我们其实项目中,可能是一个模块下面又有许多少个小零件,它们都共用同一的action和reducer,我们在各样组件中都这样写,是不是有点太艰难了?冗余代码太多了。

  其实是可以把connect抽取出来的,比如写一个connect.js:

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

export default connect(
  state=>state.main,
  dispatch=>bindActionCreators(action,dispatch)
)

  然后在急需运用的零件中如此用:

import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'

@connect
export default class App extends React.Component{
    render(){
        return <div>hello</div>
    }
}

  这样就ok了,和最起始的用法比起来,是不是显然更装逼更好用?


需要表明的是,这里用了装饰器,需要安装模块babel-plugin-transform-decorators-legacy,然后在babel中配置:

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

  如若你用的是vscode,
可以在品种根目录下添加jsconfig.json文件来排除代码警告:

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

json, 
ok了,到此处确确实实完了。其实关于connect,是能够延续钻探的,比如可以写一个通用的connect,所有的模块中有着的零件都足以用的这种,本文就不继续写下去了,以后有空子再写。

  我一贯觉得js里面把@
这玩意儿叫装饰器不佳,太难听了,像java这样,叫注解多好。

相关文章

网站地图xml地图