本文主要介紹了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
}
}Java中關於HttpURLConnection附件上傳詳解
MySQL資料庫報錯：Too many connections的解決方案
以上是react-redux中connect的裝飾器用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
