8.react-redux中connect的裝飾器用法

最近在學習react中的數據狀態的管理，也就是redux，react-redux 一般咱們要使用redux的時候，咱們會寫一個reducer和一個action,而後使用connect來包裹你的Component,以下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 <div>hello world</div>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

這樣並無什麼問題。看着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 <div>hello</div>
  }
}

看這樣是否是逼格更高了點,在實際的開發中,能夠將connect抽出來單獨寫一個模塊方便調用，減小代碼冗餘
須要說明的是，這裏用了裝飾器，須要安裝模塊babel-plugin-transform-decorators-legacy，而後在babel中配置：

{
  "plugins":[
    "transform-decorators-legacy"
  ]
}