上一篇【React.js 10】React自动连接Redux文章中,已经实现了自动连接,这边,再提出一个用装饰器的方法来书写的案例。
首先,我们需要一个额外的插件,所以,需要自己配置一下package.json
中的插件,由于我们使用脚手架创建的项目,要实现自定义配置,就要先弹出个性化配置:
npm run eject
然后安装一个支持装饰器的插件:
npm install babel-plugin-transform-decorators-legacy --save-dev
打开package.json
文件,找到babel
的配置处,配置插件:
"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-decorators-legacy"
]
}
可以修改代码了:
/* 修改前
//状态映射属性
// const mapStatetoProps = (state)=>{
// //需要哪些状态数据
// return {num : state}
// }
//需要执行的方法
// const actionCreator = { hire, hireAsync ,fire }
// App = connect(mapStatetoProps ,actionCreator)(App)
*/
// 修改后
@connect(
//需要哪些状态数据
state=>({num : state}),
//需要执行的方法,自动dispatch
{ hire, hireAsync ,fire }
)
Redux
基础使用就是这些了,后面还会有更详细的更复杂的使用介绍,敬请期待。
网友评论