我爱编程

【React.js 11】React自动连接Redux(装饰器方

2018-04-01  本文已影响112人  IUVO

上一篇【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基础使用就是这些了,后面还会有更详细的更复杂的使用介绍,敬请期待。

上一篇下一篇

猜你喜欢

热点阅读