react-redux简单实用
首先了解一个过程,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简单实用的更多相关文章
- islider结合react的简单实用
我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动 首先需要 npm install islider.js --save 让后在jsx文件头部引入 ...
- redux 的简单实用案例
redux 的简单实用案例 整体思想与结构 创建一个Action 创建一个Reducer 创建Store 在App组件开始使用 整体思想与结构 文件目录如下: 构建 action,通过创建一个函数,然 ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
随机推荐
- Docker 安装和基础用法
理解Docker(1):Docker 安装和基础用法 本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 ...
- [Python设计模式] 第18章 游戏角色备份——备忘录模式
github地址:https://github.com/cheesezh/python_design_patterns 题目 用代码模拟以下场景,一个游戏角色有生命力,攻击力,防御力等数据,在打Bos ...
- Add Columns to the Web Sessions List
To add custom columns to the Web Sessions List, add rules using FiddlerScript. The BindUIColumn Attr ...
- 单片机 MCU 中 stack 使用的探讨
stack 的使用,是单片机开发中影响最大,但是最少被讨论的问题.而提及这个问题的地方,都是对这个问题含糊其辞. 今天花了点时间,使用最笨的办法,直接阅读汇编代码,来对这个问题就行探究,这里做一下记录 ...
- 使用Sphinx编写文档
操作系统 : Windows7_x64 Python 版本 : 2.7.10 Sphinx 版本 : 官方网址:http://sphinx-doc.org github地址: https://gith ...
- 百度富文本编辑器整合fastdfs文件服务器上传
技术:springboot+maven+ueditor 概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...
- http://www.360doc.com/userhome.aspx?userid=5054188&cid=235
http://www.360doc.com/userhome.aspx?userid=5054188&cid=235
- [古怪问题] Marshal.GetActiveObject 在管理员模式下无法正常运行
问题: var obj = Marshal.GetActiveObject("PowerPoint.Application") 该代码在管理员模式下运行无法正常获取正在运行的 PP ...
- 微信小程序官方DEMO解读
我们在开始微信小程序开发的时候,对JS,HTML等前端知识一无所知,完完全全就是门外汉在尝试一个新的方向. 在下载好开发工具,微信就已经提供了一个DEMO例子: 从程序开发的角度来看这个陌生的目录结构 ...
- Unity应用架构设计(2)——使用中介者模式解耦ViewModel之间通信
当你开发一个客户端应用程序的时候,往往一个单页会包含很多子模块,在不同的平台下,这些子模块又被叫成子View(视图),或者子Component(组件).越是复杂的页面,被切割出来的子模块就越多,子模块 ...