Redux Counter Vanilla example
此示例不需要构建系统或视图框架，并且存在以显示与ES5一起使用的原始Redux API。
代码如下
<!DOCTYPE html>
<html>
<head>
<title>Redux basic example</title>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
Clicked: <span id="value">0</span> times
<button id="increment">+</button>
<button id="decrement">-</button>
<button id="incrementIfOdd">Increment if odd</button>
<button id="incrementAsync">Increment async</button>
</p>
</div>
<script>
function counter(state, action) {
if (typeof state === 'undefined') {
return 0
}
//将action和state联系起来的reducer
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
//store存储数据
var store = Redux.createStore(counter)
var valueEl = document.getElementById('value')
function render() {
valueEl.innerHTML = store.getState().toString()
}
render()
store.subscribe(render)
document.getElementById('increment')
.addEventListener('click', function () {
//通过store.dispatch将action传到store
store.dispatch({ type: 'INCREMENT' })
})
document.getElementById('decrement')
.addEventListener('click', function () {
store.dispatch({ type: 'DECREMENT' })
})
document.getElementById('incrementIfOdd')
.addEventListener('click', function () {
if (store.getState() % 2 !== 0) {
store.dispatch({ type: 'INCREMENT' })
}
})
document.getElementById('incrementAsync')
.addEventListener('click', function () {
setTimeout(function () {
store.dispatch({ type: 'INCREMENT' })
}, 1000)
})
</script>
</body>
</html>
Redux Counter Vanilla example的更多相关文章
- Redux Counter example
此项目模板是使用Create React App构建的,它提供了一种简单的方法来启动React项目而无需构建配置. 使用Create-React-App构建的项目包括对ES6语法的支持,以及几种非官方 ...
- Redux-example
Redux-example Examples from http://redux.js.org/docs/introduction/Examples.html Counter Vanilla Run ...
- Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...
- RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- react+redux教程（六）redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程（四）undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程（一）connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- redux+flux(一：入门篇)
React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...
- 通过Redux源码学习基础概念一：简单例子入门
最近公司有个项目使用react+redux来做前端部分的实现,正好有机会学习一下redux,也和小伙伴们分享一下学习的经验. 首先声明一下,这篇文章讲的是Redux的基本概念和实现,不包括react- ...
随机推荐
- linux下编译protobuf
这里我介绍两种方法,一是直接ccmake配置,二是修改cmake文件下面的CMakeList.txt文件 第一种方法:配置ccmake 1.安装sudo apt-get install cmake-c ...
- .net core 验证 Options 参数
.net core 中通过 PostConfigure 验证 Options 参数 Intro 在 .net core 中配置项推荐用 Options 来实现,有一些参数可能必须是用由用户来配置,不能 ...
- 从0开始的Python学习002python的数据类型
在创建变量的时候不用声明数据类型 # 创建变量 a = 10 # 打印变量值 print(a) 结果如下: 这种感觉和Java有很大的不同,感觉python很神奇,数据的类型是python自己决定的. ...
- BCP SQL导出EXCEL常见问题及解决方法；数据导出存储过程
一.‘xp_cmdshell’的启用 SQL Server阻止了对组件‘xp_cmdshell’的过程‘sys.xp_cmdshell’的访问.因为此组件已作为此服务嚣安全配置的一部分而被关 闭.系统 ...
- Highcharts入坑记
第一次用Highcharts画一个温度湿度变化的图片,因为不熟悉跳了好多坑,特记录下: 一.JS引用 <script src="~/Scripts/jquery.min.js" ...
- LeetCode算法题-K-diff Pairs in an Array（Java实现）
这是悦乐书的第254次更新,第267篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第121题(顺位题号是532).给定一个整数数组和一个整数k,您需要找到数组中唯一的k- ...
- WPFの命中测试
概述: WPF中的Canvas是常用的一个绘图控件,可以方便地在Canvas中添加我们需要处理的各种元素如:图片.文字等.但Canvas中元素增加到一定数量,并且有重合的时候,我们如何通过在Canv ...
- Linux：Day13(下) GRUB
GRUB(Boot Loader): grub:GRand Unified Bootloader grub 0.x:grub legacy grub 1.x:grub2 grub legacy: st ...
- MySQL数据库引擎类别和更换方式
MySQL数据库引擎类别 能用的数据库引擎取决于mysql在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEA ...
- Django view（视图）
在Django MTV模式中,View视图负责业务逻辑部分,路由系统接收到HTTP请求,并将任务分配给相应的视图函数,由视图函数来负责响应这个请求.无论视图本身包含什么逻辑,都要返回响应. 在这里HT ...