//简单运用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. js五种设计模式说明与示例

    第一种模式:js工厂模式    var lev=function(){        return "啊打";      };      function Parent(){    ...

  2. Matlab将三维变量分割为多个二维变量的方法

    最近在处理 Matlab 中的三维矩阵的时候,遇到了一个问题: 假如m 为 5*5*5的矩阵,如果以第三个维度为基础,分割为5个不同的矩阵 m1,m2,m3,m4,应该如何解决? 解决方法:eval函 ...

  3. Angular企业级开发(8)-控制器的作用域

    scope概念 scope(作用域)是视图和控制器之间的桥梁,scope本身是一个对象,有方法和属性.scope可以应用在视图和控制器上. scope简单示例 <!DOCTYPE html> ...

  4. 蔡勒（Zeller）公式：根据日期推算是星期几

    Zeller's Congruence: w=y + [y/4] + [c/4] - 2c + [26(m+1)/10] + d - 1 公式中的符号含义如下:w:星期: w对7取模得:0-星期日,1 ...

  5. HTML第二课

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Unbutu14.04 切换ROOT用户后无法启用音频

    系统环境: Ubuntu14.04 x64 问题描述: 今天安装了Ubuntu14.04的64位系统,启用root用户登录后,观看视频时出现没有声音的现象. 问题原因: Ubuntu安装后默认root ...

  7. Spring+SpringMVC+MyBatis+easyUI整合基础篇（八）mysql中文查询bug修复

    写在前面的话 在测试搜索时出现的问题,mysql通过中文查询条件搜索不出数据,但是英文和数字可以搜索到记录,中文无返回记录.本文就是写一下发现问题的过程及解决方法.此bug在第一个项目中点这里还存在, ...

  8. Oracle Jdbc驱动下载及安装本地maven仓库

    由于二进制许可 binary license的限制,oracle jdbc驱动不能通过共有仓库来获取,所以你可以下载下来添加到自己的本地仓库或私有仓库中. 添加到本地仓库步骤如下: 下载Oracle ...

  9. App Store 审核 IPv6 问题

    应用提交了N次,每次被拒都是说IPv6的事情,花点功夫把这个事情搞清楚. 苹果审核人员回复的原因都差不多,说在他们的IPv6-Only的环境中测试应用,无法正常请求我们的服务器. 因为我们的域名确实没 ...

  10. java如何在一个范围内产生多个不等的随机数

    import java.util.Random; //随机产生0-max之间num个不重复的整数 public class 产生多个不同随机数 { private static int num,max ...