這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,現在分享給大家，也給大家做個參考。
最近在琢磨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 <p>hello</p>
}
}
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 <p>hello</p>
}
}裝完了，看起來舒服了。在我們實際專案中，可能是一個模組下面又有很多個小元件，它們都共用同樣的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 <p>hello</p>
}
}這樣就ok了，跟最開始的用法比起來，是不是明顯更裝逼更好用？
要說明的是，這裡用了裝飾器，需要安裝模組babel-plugin-transform-decorators-legacy，然後在babel中設定：
{
"plugins":[
"transform-decorators-legacy"
]
}如果你用的是vscode,可以在專案根目錄下加入jsconfig.json檔案來消除程式碼警告：
{
"compilerOptions": {
"experimentalDecorators": true
}
}ok了，到這裡真的完了。其實關於connect，是可以繼續琢磨的，例如可以寫一個通用的connect，所有的模組中所有的組件都可以用的那種，本文就不繼續寫下去了，以後有機會再寫。
我一直覺得js裡面把@ 這玩意兒叫裝飾器不好，太難聽了，像java那樣，叫註解多好。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是在react-redux中有關connect裝飾器使用用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
