Redux Counter example
此项目模板是使用Create React App构建的,它提供了一种简单的方法来启动React项目而无需构建配置。
使用Create-React-App构建的项目包括对ES6语法的支持,以及几种非官方/尚未最终形式的Javascript语法,
先看效果
分析代码为
1.入口文件
import React from 'react'
import ReactDOM from 'react-dom'
//引入redux
import { createStore } from 'redux'
//入口引入组件
import Counter from './components/Counter'
//引入reducer
import counter from './reducers'
const store = createStore(counter)
const rootEl = document.getElementById('root')
// 通过dispatch一个action来set state
const render = () => ReactDOM.render(
<Counter
value={store.getState()}
onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
/>,
rootEl
)
render()
//订阅subscribe
store.subscribe(render)
reducer纯函数
//reducer.js
//纯函数state改变
export default (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
//counter组件
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Counter extends Component {
constructor(props) {
super(props);
this.incrementAsync = this.incrementAsync.bind(this);
this.incrementIfOdd = this.incrementIfOdd.bind(this);
}
incrementIfOdd() {
if (this.props.value % 2 !== 0) {
this.props.onIncrement()
}
}
incrementAsync() {
setTimeout(this.props.onIncrement, 1000)
}
render() {
const { value, onIncrement, onDecrement } = this.props
return (
<p>
Clicked: {value} times
{' '}
<button onClick={onIncrement}>
+
</button>
{' '}
<button onClick={onDecrement}>
-
</button>
{' '}
<button onClick={this.incrementIfOdd}>
Increment if odd
</button>
{' '}
<button onClick={this.incrementAsync}>
Increment async
</button>
</p>
)
}
}
Counter.propTypes = {
value: PropTypes.number.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired
}
export default Counter
Redux Counter example的更多相关文章
- Redux Counter Vanilla example
此示例不需要构建系统或视图框架,并且存在以显示与ES5一起使用的原始Redux API. 代码如下 <!DOCTYPE html> <html> <head> &l ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- redux+flux(一:入门篇)
React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...
- 通过Redux源码学习基础概念一:简单例子入门
最近公司有个项目使用react+redux来做前端部分的实现,正好有机会学习一下redux,也和小伙伴们分享一下学习的经验. 首先声明一下,这篇文章讲的是Redux的基本概念和实现,不包括react- ...
- redux介绍与入门
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...
- Redux教程3:添加倒计时
前面的教程里面,我们搭建了一个简单红绿灯示例,通过在console输出当面的倒计时时间:由于界面上不能显示倒计时,用户体验并不良好,本节我们就添加一个简单的倒计时改善一下. 作为本系列的最后一篇文章, ...
随机推荐
- 章节九、2-使用firefoxdriver浏览器进行自动化测试
一.演示如何使用火狐浏览器打开“百度” package basicweb; import org.openqa.selenium.WebDriver; import org.openqa.seleni ...
- uiautomatorviewer 查看元素报错: Error taking device screenshot: null 原因
使用uiautomatorviewer 查看android某些页面元素,出现错误Error obtaining UI hierarchy Reason: Error taking device sc ...
- iOS transform属性的使用
1.transform属性 在iOS开发中,通过transform属性可以修改UIView对象的平移.缩放比例和旋转角度,常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置 ...
- md5sum的使用
通过md5sum可以对文件做哈希校验,用来验证文件完整性. 批量生成校验值 $ find . -iname "*.mp4" -exec md5sum -t {} \; >/t ...
- 固态+机械双硬盘分别安装Win10和Ubuntu16.04双系统
博主的笔记本是256G固态+1T机械,固态事先已经安装好了Win10系统,想着把机械硬盘分出500G用来安装Ubuntu16.04,剩余的继续用作Win下的资料盘.这里不介绍安装Win10过程,也不记 ...
- for循环和foreach循环遍历集合的效率比较
先上代码 package com.test; import java.util.ArrayList; import java.util.LinkedList; import java.util.Lis ...
- 在Centos7.2(64位)下搭建Web服务器
一:通过Yum安装mysql 1 # wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm 2 # rpm -i ...
- 【Teradata SQL】FALLBACK表改为NO FALLBACK表
FALLBACK表在数据库中会留存双份数据,增加了数据可用性,但浪费了存储空间.变更表属性语句如下: alter table tab_fallback ,no fallback;
- vue li click
<ul> <li @click="mechanisms(1)">AAAAA</li> <li @click=" ...
- 勇者斗恶龙 uva 11292(简单贪心)
思路:先将龙和士兵进行分别排序从小到大.然后,每次找当前最小龙的第一个大于它的骑手之后退出,开始下一个龙,重复上一次操作. #include<iostream> #include<a ...