此项目模板是使用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的更多相关文章

  1. Redux Counter Vanilla example

    此示例不需要构建系统或视图框架,并且存在以显示与ES5一起使用的原始Redux API. 代码如下 <!DOCTYPE html> <html> <head> &l ...

  2. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  3. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  4. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  5. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  6. redux+flux(一:入门篇)

    React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...

  7. 通过Redux源码学习基础概念一:简单例子入门

    最近公司有个项目使用react+redux来做前端部分的实现,正好有机会学习一下redux,也和小伙伴们分享一下学习的经验. 首先声明一下,这篇文章讲的是Redux的基本概念和实现,不包括react- ...

  8. 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. ...

  9. Redux教程3:添加倒计时

    前面的教程里面,我们搭建了一个简单红绿灯示例,通过在console输出当面的倒计时时间:由于界面上不能显示倒计时,用户体验并不良好,本节我们就添加一个简单的倒计时改善一下. 作为本系列的最后一篇文章, ...

随机推荐

  1. 章节九、2-使用firefoxdriver浏览器进行自动化测试

    一.演示如何使用火狐浏览器打开“百度” package basicweb; import org.openqa.selenium.WebDriver; import org.openqa.seleni ...

  2. uiautomatorviewer 查看元素报错: Error taking device screenshot: null 原因

    使用uiautomatorviewer 查看android某些页面元素,出现错误Error obtaining UI hierarchy  Reason: Error taking device sc ...

  3. iOS transform属性的使用

    1.transform属性 在iOS开发中,通过transform属性可以修改UIView对象的平移.缩放比例和旋转角度,常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置 ...

  4. md5sum的使用

    通过md5sum可以对文件做哈希校验,用来验证文件完整性. 批量生成校验值 $ find . -iname "*.mp4" -exec md5sum -t {} \; >/t ...

  5. 固态+机械双硬盘分别安装Win10和Ubuntu16.04双系统

    博主的笔记本是256G固态+1T机械,固态事先已经安装好了Win10系统,想着把机械硬盘分出500G用来安装Ubuntu16.04,剩余的继续用作Win下的资料盘.这里不介绍安装Win10过程,也不记 ...

  6. for循环和foreach循环遍历集合的效率比较

    先上代码 package com.test; import java.util.ArrayList; import java.util.LinkedList; import java.util.Lis ...

  7. 在Centos7.2(64位)下搭建Web服务器

    一:通过Yum安装mysql 1 # wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm 2 # rpm -i ...

  8. 【Teradata SQL】FALLBACK表改为NO FALLBACK表

    FALLBACK表在数据库中会留存双份数据,增加了数据可用性,但浪费了存储空间.变更表属性语句如下: alter table tab_fallback ,no fallback;

  9. vue li click

    <ul>      <li @click="mechanisms(1)">AAAAA</li>      <li @click=" ...

  10. 勇者斗恶龙 uva 11292(简单贪心)

    思路:先将龙和士兵进行分别排序从小到大.然后,每次找当前最小龙的第一个大于它的骑手之后退出,开始下一个龙,重复上一次操作. #include<iostream> #include<a ...