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"
  ]
}