[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的组件类名的首字母必须 ...
随机推荐
- iOS9升级后第三方平台无法分享的问题
最近升级到了Xcode7,在真机调试中发现在初始化微博SDK时程序Crash. 解决办法从微博官网下一个最新的SDK,替换掉工程中的即可. 2.替换微博最新SDK之后成功运行程序,之后发现微信.QQ. ...
- 01.Net入门知识
1..Net学习路线及几个容易混淆的概念 .Net只是一个平台,提供运行.Net程序需要的虚拟机.类库等 C#就是.Net平台下的一个开发语言,.Net下的语言还有VB.Net.PowerShell等 ...
- 使用BOOST BIND库提高C++程序性能
Boost.Bind为函数和函数对象,值语义和指针提供语义了一致的语法.我们首先通过一些简单的例子来看看它的基本用法,之后我们会延伸到嵌套绑定以实现功能组合.理解bind用法的一个关键是理解占位符(p ...
- unset() isset() empty difined()操作变量详解
isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在则返 ...
- 【转】火火火火火！看HomeKit如何改变物联网和智能家居？
摘要: 智能家居并非新概念,然而在苹果等巨头插足之前,它却只是一盘散沙,各自为营,苹果又将如何凭借HomeKit构建起拥有统一界面和控制中心的平台来实现各种智能家居设备与应用之间的无缝连接,真正实现智 ...
- 自然语言处理(1)之NLTK与PYTHON
自然语言处理(1)之NLTK与PYTHON 题记: 由于现在的项目是搜索引擎,所以不由的对自然语言处理产生了好奇,再加上一直以来都想学Python,只是没有机会与时间.碰巧这几天在亚马逊上找书时发现了 ...
- 转：Centos6.3添加解码器播放MP3和常见视频音频
原文来自于:http://blog.csdn.net/odaynot/article/details/8462273 参考地址: http://wiki.centos.org/AdditionalRe ...
- C语言学习--可变数组
#ifndef _ARRAY_ #define _ARRAY_ typedef struct { int *array; int size; } Array; //此处定义结构数据类型 Array,虽 ...
- poj 2406Power Strings
http://poj.org/problem?id=2406 #include<cstdio> #include<cstring> #include<algorithm& ...
- (step5.1.2)hdu 2473(Junk-Mail Filter——并查集)
题目大意:输入两个整数n,m(n表示点的个数,m表示操作数).在接下来的m行中,对点的操作有两种 1)M a b . 表示将a.b并到一个集合中 2)S a .表示将a从原来的集合中去除,而成为一个单 ...