//简单运用redux写了一个加减乘除功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jisuanji</title>
<script src="http://cdn.bootcss.com/redux/3.6.0/redux.js"></script>
</head>
<body>
<h1>加减乘除例子</h1>
<input type="text" id="num1" name="" onchange="compute()" />
<select name="" id="selection" onchange="compute()">
<option value="add" selected="selected">加</option>
<option value="minus">减</option>
<option value="multiply">乘</option>
<option value="divide">除</option>
</select>
<input type="text" id="num2" name="" onchange="compute()" />
<label>=</label>
<label name="goal" id="value"></label>
<script type="text/javascript">
// reducer 根据当前state和action计算出nextstate
function countReducer(state,action){
if(state==="undefined"){
return 0;
}
switch(action.type){
// action javacsript对象 redux规定他必须含有一个字符串值type属性
case "ADD":
return Number(action.num1)+Number(action.num2)//为什么要用number，因为所有的html文本都是字符串类型，必须转化为数字
case "MINUS":
return action.num1 - action.num2
case "MULTIPLY":
return action.num1 * action.num2
case "DIVIDE":
return action.num1 / action.num2
default:
return state
}
}
var store = Redux.createStore(countReducer);
var valueEl = document.getElementById("value");
function render(){
valueEl.innerHTML = store.getState();
}
// render()
store.subscribe(render)//dispatch时，调用此处添加的监听函数
function compute(){
var num1Value = document.getElementById("num1").value;
var num2Value = document.getElementById("num2").value;
var value = document.getElementById("selection").value;
console.log(value)
if(num1Value === "undefined"){
num1Value = 0;
}
if(num2Value === "undefined"){
num2Value = 0;
}
switch(value){
case "add":
store.dispatch({type:"ADD",num1:num1Value,num2:num2Value})
break
case "minus":
store.dispatch({type:"MINUS",num1:num1Value,num2:num2Value})
break
case "multiply":
store.dispatch({type:"MULTIPLY",num1:num1Value,num2:num2Value})
break
case "divide":
store.dispatch({type:"DIVIDE",num1:num1Value,num2:num2Value})
break
}
}
</script>
</body>
</html>

redux计算器的更多相关文章

  1. 6周学习计划，攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

  2. 初步了解redux

    redux作为react的状态状态管理工具,是十分重要的一部分,但是它在学习起来比较困难.它的写法一共分为三部分,而且他不像其他的东西一样可以写一步,在页面上查看一下.它必须三个部分全部完成之后,才能 ...

  3. react教程 — redux

    一.概念:             http://caibaojian.com/react/redux-basic.html   或  https://www.cnblogs.com/maopixin ...

  4. redux和dva

    实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...

  5. RxJS + Redux + React = Amazing!（译一）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  6. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  7. RxJS + Redux + React = Amazing!（译二）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

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

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

随机推荐

  1. UU农场平台开发 UU农场拆复利系统

    UU农场平台开发 UU农场拆复利系统今年比较新的一款游戏,类似于QQ农场,但又加入了很多新型的互联网理财模式!UU农场平台开发 UU农场拆复利系统.UU农场开发.UU农场游戏平台开发.UU农场平台开发 ...

  2. mvc关于三级联动修改时数据回显

    在网上找了好久,都没有找到自己想要的那种效果,最后还是自己写出来了, 虽然方法有点笨. 这是Controller里 public ActionResult Edit(string id) { //查询 ...

  3. PHP命名空间的概念与使用

    命名空间在其它编程语言中其名称不尽相同,但其核心慨念都是自定义一个存储空间.避免类名重复系统无法判断该执行哪一个类或是哪一个函数. 举例说明下.我先创建test这个文件夹在其当前目录下再创建一个ind ...

  4. KoaHub.JS基于Node.js开发的处理和显示日期代码

    moment Parse, validate, manipulate, and display dates      A lightweight JavaScript date library for ...

  5. Python 3 集合基础和概念！

    Python 3 集合基础和概念! Python 3中,集合是无序的,所以不能进行切片和索引操作. 创建集合有两个方法:set()方法创建的集合是可变的,可被迭代的:frozenset()方法创建的集 ...

  6. 3097: Hash Killer I

    3097: Hash Killer I Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 425  Solved: 15 ...

  7. java开发之阿里云对象存储OSS和云数据库Memcache的使用

    web开发中标配:aliyun ECS(阿里云服务器),aliyun RDS(阿里云数据库),aliyun OSS(阿里云对象存储),aliyun Memcache(阿里云缓存数据库). 今天就介绍下 ...

  8. 千呼万呼使出来Gogland （jetBrains发布的golang IDE）

    由于之前一直在用PyCharm在开发, 已经习惯了这个IDE. 转golang开发后一直没找到合适的debug功能的IDE,忽然听说jetBrains发布测试版golang IDE: Gogland带 ...

  9. Android中的几种多线程实现

    有以下几种方式: 1)Activity.runOnUiThread(Runnable) 2)View.post(Runnable) ;View.postDelay(Runnable , long) 3 ...

  10. IE10去掉input的type=”text”输入内容时出现的小叉号（X）和type=”password”出现的小眼睛图标

    最近在做一个后台管理系统项目,遇到以下两个问题: 1.从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉号(X),方便用户点击清除已经输 ...