40_redux_counter应用_redux完善版本
项目结构:
代码:
import React from 'react'; import ReactDOM from 'react-dom'; import store from './redux/store' import App from './components/app'; function render() { ReactDOM.render(<App store={store}/>, document.getElementById('root')); } //初始化渲染 render() //订阅监听(store中的状态变化了,就会自动调用重绘) store.subscribe(render)
index.js
import React, {Component} from 'react' import * as actions from '../redux/actions' export default class App extends Component { increment = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.调用store的方法更新状态 this.props.store.dispatch(actions.increment(number)) }; decrement = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.调用store的方法更新状态 this.props.store.dispatch(actions.decrement(number)) }; incrementIfOdd = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.得到原本的count状态 const count = this.props.store.getState() //3.判断,满足条件再更新状态 if (count % 2 === 1) { //调用store方法更新状态 this.props.store.dispatch(actions.increment(number)) } } incrementAsync = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //启动延时定时器 setTimeout(() => { this.props.store.dispatch(actions.decrement(number)) }, 1000) }; render() { const count = this.props.store.getState() // debugger return ( <div> <p>click {count} times</p> <div> <select ref={select => this.select = select}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>increment odd</button> <button onClick={this.incrementAsync}>increment async</button> </div> </div> ) } }
app.jsx
import {createStore} from 'redux'; import {counter} from './reducers'; //生成store对象 const store = createStore(counter);//内部会第一次调用reduer函数得到初始state console.log(store, store.getState()); export default store
store.js
import {INCREMENT, DECREMENT} from '../redux/action-types'; /* * 包含所有action creator * */ //增加 export const increment = (number) => ({ type: INCREMENT, data: number }) //减少 export const decrement = (number) => ({ type: DECREMENT, data: number })
actions.js
40_redux_counter应用_redux完善版本的更多相关文章
- 给WPF示例图形加上方便查看大小的格子之完善版本
原文:给WPF示例图形加上方便查看大小的格子之完善版本 去年10月份, 我曾写过一篇"给WPF示例图形加上方便查看大小的格子"的BLOG(http://blog.csdn.net/ ...
- iOS----友盟分享完善版本
分享 详细集成 注意:1.线上集成文档的示例代码对应的是最新版本的SDK,如果你所用的SDK版本类名或者方法名与此文档不符合,请看随包里面的线下文档或者下载使用最新版本的SDK. 设置友盟appkey ...
- 一个自己实现的Vector 完善版本
一个自己实现的Vector(只能处理基本类型数据) 转载自: https://www.ev0l.art/index.php/archives/22/ string 类型不行 bool char* in ...
- 42_redux_counter应用_redux异步版本
前言: redux默认不支持异步编程,需要下载redux插件(异步中间件) 如何下载: npm install --save redux-thunk 项目结构: 代码: import React, { ...
- c coroutine
今天看了下云风c coroutine 代码 博客,发现 coroutine 实现原理其实还比较简单,就用户态栈切换,只需要几十行汇编,特别轻量级. 具体实现 1. 创建一个coroutine: 也就 ...
- Python数据库迁移脚本(终极版)
上次的那几个脚本这次全部整合到了一起,而且后面发现了一个可以使用的ODBC包,于是这次采用的方式就很简单了,直接通过ODBC将InterBase数据库中的数据全部取出来之后通过Python的sqlal ...
- 不一样的角度 解读微信小程序
不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙 ...
- 【java 上传+下载】
一.先说说上传 第一步:pom.xml文件 加上 上传文件依赖架包 <dependency> <groupId>commons-fileupload</groupId&g ...
- 文件上传和下载(可批量上传)——Spring(二)
针对SpringMVC的文件上传和下载.下载用之前“文件上传和下载——基础(一)”的依然可以,但是上传功能要修改,这是因为springMVC 都为我们封装好成自己的文件对象了,转换的过程就在我们所配置 ...
随机推荐
- Android L2TP Client Setup
原文链接:http://www.softether.org/4-docs/2-howto/9.L2TPIPsec_Setup_Guide_for_SoftEther_VPN_Server/3.Andr ...
- python基础教程002_列表与元组
1.列表 定义: edward = ['Edward Gumdy',42] 描述edward姓名与年龄的列表 edward = [] 空列表 操作: 索引: greeting = 'hello' pr ...
- Android Studio 调试快捷键
一直在用微软的东西,用 Android Studio 开发还是太坑了.网上很多人说调试快捷竟然都是错的,不知道是不是不同版本不一样. Android Studio 3.2 快捷键如下: F7:进入当前 ...
- 《Self-Attention Generative Adversarial Networks》里的注意力计算
前天看了 criss-cross 里的注意力模型 仔细理解了 在: https://www.cnblogs.com/yjphhw/p/10750797.html 今天又看了一个注意力模型 < ...
- FtpHelper实现ftp服务器文件读写操作(C#)
最近做了一个项目,需要读取ftp服务器上的文件,于是参考了网上提供的一些帮组方法,使用过程中,出现一些小细节问题,于是本人做了一些修改,拿来分享一下 using System; using Syste ...
- Python之print()函数
1. 输出字符串 >>> str = 'Hello World' >>> print (str) Hello World 2. 格式化输出整数 支持参数格式化 &g ...
- spark安装
Spark下载 在spark主页的download下,选择自己想要安装的spark版本, 注意跟本地hadoop的兼容性.我这里选择了2.4.0. https://www.apache.org/dyn ...
- maven向本地仓库导入jar包
如果maven工程的依赖jar包在网上找不到,那么只能自己打包,然后传到本地仓库,可以使用如下命令 mvn install:install-file -DgroupId=com.redis.redis ...
- [UE4]引用Grabbable接口
一.当前:可抓取对象的类型是GrabTargetActor 二.修改目标:可抓取对象的类型改成Grabbable. 1.Fand Grab Target的返回值改成Grabbale(变量的数据类型可以 ...
- Centos 7环境下配置MySQL 5.7读写分离
1.实验目的: 实现在Centos 7系统环境下,MySQL5.7读写分离. 2.实验条件: MySQL主服务器:Centos 7桌面环境,IP:10.10.11.31 MySQL从服务器:Cento ...