在react-redux中有關connect裝飾器使用用法

這篇文章主要介紹了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那樣，叫註解多好。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

詳細解答vue的變化對元件有什麼影響？

使用Parcel如何打包

詳細解讀Vue如何設定打包工具

在vue中如何實作watch自動偵測資料變化

以上是在react-redux中有關connect裝飾器使用用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！