//简单运用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. 关于ReentrantLock和Condition的用法

    这篇博客是过年后的第一篇博客,2.13正式上班,之前在家休年假.上班第一天公司说有个紧急的项目需要上线,所以我们连续加了两个星期的班,直到上个周六还在加班,终于成功上线了.今天是2月的最后的一天,继续 ...

  2. Linux Bash Shell入门教程

    Linux 系统根据 "#!" 及该字串后面的信息确定该文件的类型,关于这一问题同学们回去以后可以通过 "man magic"命令 及 /usr/share/m ...

  3. webpack(四）处理 css\less\sass 样式

    (一) 处理普通的.css 文件,需要安装 css-loader,style-loader .less 文件,需要安装 less-loader .sass 文件,需安装  less-loader np ...

  4. 从源码解析TreeMap

    上篇文章我们介绍了HashMap集合,这是一个键值对集合,可以高效的按照键查找数值.但是它有一个缺陷:数据如果是无序的可以是很高效的,但是如果数据需要排列有顺序就不适合了.本篇将要介绍的一个集合是树集 ...

  5. 【Harmony】概述

      原文来自本人的微信公众号文章  系统工程实验室     引言 基于模型的系统工程(简称MBSE,英文全称Model based System Engineering )的实践至少需要三个维度的支撑 ...

  6. Memcached·Redis缓存的基本操作

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  7. spring exception

    Spring MVC异常处理SimpleMappingExceptionResolver[转] (2012-12-07 13:45:33) 转载▼ 标签: 杂谈 分类: 技术分享 Spring3.0中 ...

  8. (五)CSS和JavaScript基础

    DHTML :制作动态HTML页面的技术 DHTML=HTML+层叠样式表CSS+脚本语言javascript 一.CSS 1.1 CSS样式的分类: 行内样式:只影响一行,其他相同标签也不影响.如下 ...

  9. CDIF: 基于JSON的SOA软件框架

    通用设备互联框架(CDIF)是一个具备中美知识产权保护的,基于web的连接框架,目前有部分开源实现存放在: GitHub - out4b/cdif: Common device interconnec ...

  10. 3522: [Poi2014]Hotel

    3522: [Poi2014]Hotel Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 253  Solved: 117[Submit][Status ...