傳統(tǒng)的react-redux寫法
Test.js
import React, { Component } from 'react'
import { connetc } from 'react-redux'
import { bindActionCreators } from 'redux'
import action from './action'
class Test extends Compnent{
render(){
return (
<div>hello world</div>
)
}
}
const mapStateToProps = (state) =>{
return state.Test
}
const mapDispatchToProps = (dispatch) =>{
return bindActionCreators(action,dispatch)
}
export default connetc(
mapStateToProps,
mapDispatchToProps
)(Test)
這種寫法需要在每個使用redux的頁面都寫一段connect的操作，可以將這一段封裝成裝飾器函數(shù)來簡化
connetc.js
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
export default (mode,action)=>{
return connect(
state=>state[mode],
dispatch=>bindActionCreators(action,dispatch)
)
}
在test.js中只需要調(diào)用裝飾器函數(shù)傳入redux模塊名和action即可
Test.js
import React, { Component } from 'react'
import connetc from './connect'
import { bindActionCreators } from 'redux'
import action from './action'
@connect('Test',action)
class Test extends Compnent{
render(){
return (
<div>hello world</div>
)
}
}
export default Test
因為裝飾器是未來語法曹仗，直接使用會報錯，需要babel插件babel-plugin-transform-decorators-legacy來支持
$ yarn add babel-plugin-transform-decorators-legacy -D
安裝完成后，在package.json中（creat-reat-app的babel配置在package.json中）添加如下配置
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
配置完畢后，就可以正常使用裝飾器了
