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那樣，叫註解多好。

相關推薦：

Java中關於HttpURLConnection附件上傳詳解

MySQL資料庫報錯：Too many connections的解決方案

mysqli_connect的10篇內容推薦

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