传统的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的操作，可以将这一段封装成装饰器函数来简化
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中只需要调用装饰器函数传入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
}
]
]
}
配置完毕后，就可以正常使用装饰器了
