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- ...
随机推荐
- EFCore使用JSON_VALUE查询json对象的值
EFCore使用JSON_VALUE查询json对象的值 Intro SqlServer 从2016开始支持 JSON 操作,可以使用 JSON_VALUE 查询 JSON 对象的某个属性值,更多介绍 ...
- Java https ssl证书导入删除
下载并命名 例如命名github.cer 放进jre的lib\security下 keytool -delete [OPTION]... 选项: -alias <alias> 要处理的条目 ...
- 在windows下搭建汇编编程环境
汇编语言程序搭建masm+debug 下载链接 dosbox:链接:https://pan.baidu.com/s/1TgkfU-d5w6Nz9TOYro1pYw 密码:mp83 masm:链接:ht ...
- tomcat设置开机启动
一.windows 1. 下载tomcat 2. 进入bin目录,查看是否存在service.dat,如果没有自行创建 3. 打开cmd,进入tomcat>bin目录 说明:用法: servic ...
- centos7防火墙开放端口等命令
CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现以前CentOS 6 系列中的 iptables 相关命令不能用了,查了下,发现Centos 7使用fire ...
- 使用Java反射优化多个方法调用
有段时间没来写博客了,心里一直念叨空了来,今天有时间来记录一篇.前段时间领导提出优化部分系统模块,根据业务要求系统中有很多产品,产品下面有N个指标,一个指标就对应一个方法,所以系统代码中就是这样一个情 ...
- Docker: 企业级镜像仓库Harbor的使用
上一节,演示了Harbor的安装部署 这次我们来讲解 Harbor的使用. 我们需要了解到: 1. 如何推镜像到镜像仓库 2. 如何从镜像仓库拉取镜像 3. 如何运行从私有仓库拉取的镜像 # 查看 h ...
- PySocks安装使用方法
PySocks是一个基于Python的SOCKS代理客户端,它是SocksiPy的一个分支,修改了一些bug和增加了一些额外功能. ---------------------------------- ...
- 一、TensorFlow初探
目录 计算模型 数据模型 运行模型 TensorFlow及神经网络 import tensorflow as tf a = tf.constant([1.0, 2.0], name='a', dtyp ...
- C#模板设计模式使用和学习心得
模板设计模式: 模版方法模式由一个抽象类和一个(或一组)实现类通过继承结构组成,抽象类中的方法分为三种: 抽象方法:父类中只声明但不加以实现,而是定义好规范,然后由它的子类去实现. 模版方法:由抽象类 ...