[Reduc] React Counter Example
Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
<script src="https://fb.me/react-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script> </head>
<body>
<div id='root'></div>
</body>
</html>
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
const Counter = ({
value,
onIncrement,
onDecrement
}) => (
<div>
<h1>{value}</h1>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</div>
);
const { createStore } = Redux;
const store = createStore(counter);
const render = () => {
ReactDOM.render(
<Counter
value={store.getState()}
onIncrement={() =>
store.dispatch({
type: 'INCREMENT'
})
}
onDecrement={() =>
store.dispatch({
type: 'DECREMENT'
})
}
/>,
document.getElementById('root')
);
};
store.subscribe(render);
render();
From React 0.14, you can declear a compoment by using a function.
[Reduc] React Counter Example的更多相关文章
- [Recompose] Merge RxJS Button Event Streams to Build a React Counter Component
Combining input streams then using scan to track the results is a common scenario when coding with s ...
- RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- react+redux教程（六）redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- zepto/jQuery、AngularJS、React、Nuclear的演化
写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...
- 前端自动化测试 —— TDD环境配置（React+TypeScript）
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
- react+redux教程（四）undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程（一）connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- React官网学习笔记
欢迎指导与讨论 : ) 前言 本文主要是笔者在React英文官网学习时整理的笔记.由于笔者水平有限,如有错误恳请指出 O(∩_∩)O 一 .Tutoial 篇 1 . React的组件类名的首字母必须 ...
随机推荐
- Android 开发笔记——对应用进行单元测试
在实际开发中,开发android软件的过程需要不断地进行测试.而使用Junit测试框架,是正规Android开发的必用技术, 在Junit中可以得到组件,可以模拟发送事件和检测程序处理的正确性. 第一 ...
- （转）MySQL数据库命名规范及约定
一.[操作规范]1. 如无备注,则表中的第一个id字段一定是主键且为自动增长:2. 如无备注,则数值类型的字段请使用UNSIGNED属性:3. 如无备注,排序字段order_id在程序中默认使用降序排 ...
- iOS 中的传值方式
一. 属性传值 将A页面所拥有的信息通过属性传递到B页面使用 很常用的传值,也很方便,但是要拿到类的属性.例如: B页面定义了一个naviTitle属性,在A页面中直接通过属性赋值将A页面中的值传 ...
- Delphi 封装Frame到Dll文件
做项目的时候,发现这个Frame很好用,为了省空间.调用和修改方便,就将Frame封装到dll(动态链接库)里面,确实很好使. 效果图如下: 上图是临时测试用的,忘了将Frame的align设置成al ...
- JavaScript_object基础
之前写Java时老是有点蒙,大部分都是用jQuery,但原理还不是很清楚,最近一段时间在系统的学习JavaScript,有什么问题或错误请指出,多谢..................... Obje ...
- WebService笔记-Schema约束
Schema约束 俗话说得好 好记性不如烂笔头. 看了下WebService视频,觉得还是得下笔记. 观看的视频地址:http://edu.51cto.com/ ...
- 优秀的弹窗插件 jquery.lightbox_me.js
项目地址: https://github.com/buckwilson/Lightbox_me用法:http://buckwilson.me/lightboxme/ var opt = { 'cent ...
- 新思路：Exception Handle
以前提到异常处理,马上就想到加try-catch. 没错,这种应激反应是对的.关键是怎么加? 如果想为每一个方法都加异常处理,输出相同格式的异常信息,应该怎么做呢? 难道是为每一个方法加一个try-c ...
- phpinfo.php
---恢复内容开始--- apache中的配置不对 查看httpd.conf文件中是否有: AddType ...... AddType application/x-httpd-php .php -- ...
- Mifare 1卡的存储结构
存取控制指符合什么条件才能对卡片进行操作. S50和S70的块分为数据块和控制块,对数据块的操作有“读”.“写”.“加值”.“减值(含传输和存储)”四种,对控制块的操作只有“读”和“写”两种. S50 ...