美文网首页我爱编程
【React.js 11】React自动连接Redux(装饰器方

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

作者: IUVO | 来源:发表于2018-04-01 16:37 被阅读112次

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

    相关文章

      网友评论

        本文标题:【React.js 11】React自动连接Redux(装饰器方

        本文链接:https://www.haomeiwen.com/subject/hoqacftx.html