首先了解一个过程,redux  肯定是通过在组件中出发一个方法(事件),我们可以实现一个简单的例子播放和停止播放(写到这今日心情不好,下次继续)

redux需要安装 以下依赖:
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
因为用到了es6/7的语法,需要安装babel转码
cnpm install babel-plugin-import --save
cnpm install babel-plugin-transform-decorators-legacy --save //装饰器模块
cnpm install babel-preset-es2015 --save
cnpm install babel-preset-react --save
cnpm install babel-preset-stage-2 --save
以及添加.babelrc文件 (与package.json同级)
{
"presets": [ //presets 设置转码规则
"es2015",
"react",
"stage-2",
],
"plugins": ["transform-decorators-legacy"] //plugins 添加插件
}

redux需要安装 以下依赖:
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
@connect装饰器报错处理
因为用到了es6/7的语法,需要安装babel转码
npm run eject //解除封装
cnpm install babel-plugin-transform-decorators-legacy --save-dev
cnpm install @babel/plugin-proposal-decorators --save-dev
在package.json中添加插件支持ES7
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},

  

react-redux简单实用的更多相关文章

  1. islider结合react的简单实用

    我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动 首先需要 npm install islider.js --save 让后在jsx文件头部引入 ...

  2. redux 的简单实用案例

    redux 的简单实用案例 整体思想与结构 创建一个Action 创建一个Reducer 创建Store 在App组件开始使用 整体思想与结构 文件目录如下: 构建 action,通过创建一个函数,然 ...

  3. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  4. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  5. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  6. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  7. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  8. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  9. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  10. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

随机推荐

  1. linux中查看软件文件安装路径

    在linux中文件与软件一般都是安装在到/usr/share和/usr/local中了,如果我们需要查看软件安装路径linux为我们提供了查看命令,whereis 就可以帮我查找文件安装路径在哪里了 ...

  2. Spark2.2(三十九):如何根据appName监控spark任务,当任务不存在则启动(任务存在当超过多久没有活动状态则kill,等待下次启动)

    业务需求 实现一个根据spark任务的appName来监控任务是否存在,及任务是否卡死的监控. 1)给定一个appName,根据appName从yarn application -list中验证任务是 ...

  3. 【redis持久化】redis持久化理解

    1.以下内容仅为个人理解和总结,仅供参考,万万不可全盘真信,内容会进行实时改进和修正 2.redis持久化: 参考链接1.https://redis.io/topics/persistence  -- ...

  4. 如何快速申请苹果IOS个人开发者账号

    在上周我有一同事,他利用周末的时间自己做了一个IOS版本游戏类APP,用Unity3D开发的(抱着好玩的心态),于是他想发布到苹果App Store 上去.他没有苹果开发者账号,也没有购买过. 于是找 ...

  5. (原)tensorflow使用eager在mnist上训练的简单例子

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/9989586.html 代码网址: https://github.com/darkknightzh/t ...

  6. hive Spark SQL分析窗口函数

    Spark1.4发布,支持了窗口分析函数(window functions).在离线平台中,90%以上的离线分析任务都是使用Hive实现,其中必然会使用很多窗口分析函数,如果SparkSQL支持窗口分 ...

  7. 使用PIP扩展BTARN

    下载安装部署 从GS1 US RosettaNet下载相应的PIP文件  新建BizTalk解决方案并设置签名 添加->现有项(C:\Program Files (x86)\Microsoft ...

  8. SQL Server 2016 查询存储性能优化小结

    SQL Server 2016已经发布了有半年多,相信还有很多小伙伴还没有开始使用,今天我们来谈谈SQL Server 2016 查询存储性能优化,希望大家能够喜欢 作为一个DBA,排除SQL Ser ...

  9. 用xcode9编译出ios越狱机程序使用的dylib

    因为xcode9默认不能创建dylib工程,所以 选择 静态库 工程后,修改编译选项使得变成dylib工程. 步骤: 一.xcode9 -> File -> New -> Proje ...

  10. 2.4G还是5G?带你选择最正确的路由器

    智能设备井喷的时代,无线路由器成为家庭中最重要的电器设备.稳定性.连接速度.信号强弱都是无线路由使用体验的重要组成部分.究竟如何选购与配置路由器才能得到最好的用户体验呢? 当你在选购无线路由器的时候是 ...