這篇文章主要介紹了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 hello
} } 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 hello
} }
裝完了，看起來舒服了。在我們實際專案中，可能是一個模組下面又有很多個小元件，它們都共用同樣的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 hello
} }
這樣就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中文網其他相關文章！
