使用redux简单的实现加法运算(简单的状态改变)
描述该做啥?(action)!具体怎么做(reducer)!统一规划(store:包含reducer+所有的state)
上代码:index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Provider } from 'react-redux';
import {createStore} from 'redux';
import APP from './app';
//创建reducer,传入初始化的状态,和需要改变的元素描述:action
//初始化状态
const initialState={defaultNum:10};
function add(state=initialState,action){
console.log("2"+action.type);
switch (action.type) {
case "ADD_ONE":
let ss=Object.assign({},state,{defaultNum:state.defaultNum-1})
return ss;
default:
return state;
}
}
class test extends Component{
constructor(props){
super(props);
this.state={
store:createStore(add),
};
}
render(){
return(
<Provider store={this.state.store}>
<APP store={this.state.store}/>
</Provider>
);
}
}
AppRegistry.registerComponent('test', () => test);
在上面的入口代码中,先是定义了reducer,来具体做一些事,用reducer作为参数来创建store,然后通过Provider来将store传入入口<APP/>组件中!然后看APP.js的代码:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import {connect} from 'react-redux';
//action
let action={type:"ADD_ONE"};
class APP extends Component {
constructor(props){
super(props);
this.state={
}
}
_onpress(){
console.log("1"+this.props.defaultNum);
this.props.dispatch(action);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text} onPress={this._onpress.bind(this)}>{this.props.defaultNum}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text:{
fontSize:40
}
});
function select(state){
console.log("3"+state.defaultNum);
return {defaultNum:state.defaultNum}
}
export default connect(select)(APP)
在APP.js代码中,我们首先定义了action(当然这些都是可以在外部写的) 然后通过文本的点击事件触发action,将这个action通过store中的dispatch分发到reducer中!那么
export default connect(select)(APP)
就是包装APP组件,将store的dispatch方法传入this.props中!
当reducer运行结束后,返回的数据由
export default connect(select)(APP)
中的select来更新当前的数据。 相关链接:http://www.jianshu.com/p/e261818be3ff
使用redux简单的实现加法运算(简单的状态改变)的更多相关文章
- 简单的新手加法运算(基于Struts2)
软件151 王帅 在搭好框架的前提下,首先编写action.java文件: import com.opensymphony.xwork2.ActionSupport; public class Us ...
- ajax 的简单请求,get的加法运算,post加法运算,用户登录认证
视图函数部分 from django.shortcuts import render, HttpResponse import time from app01.models import User i ...
- jQuery的加法运算.
jQuery的加法运算. 加法运算 ?想必大家听到这都会不屑了,加法运算这是多么简单的运算.然而有的时候在jQuery也让人挺头疼的. 常规的是: var num1 = 123; var num2=1 ...
- 整数运算:CPU内部只有加法运算
学汇编的一边儿去.我这里讲的是CPU进行计算的原理.首先我这里用MC的红石电路模拟了一个加法器:http://www.0xaa55.com/thread-313-1-1.htm首先加法器是怎么实现的呢 ...
- RNN入门(4)利用LSTM实现整数加法运算
本文将介绍LSTM模型在实现整数加法方面的应用. 我们以0-255之间的整数加法为例,生成的结果在0到510之间.为了能利用深度学习模型模拟整数的加法运算,我们需要将输入的两个加数和输出的结果 ...
- HDU 1002 (高精度加法运算)
A + B ProblemII Time Limit: 2000/1000 MS(Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- 小白专场-多项式乘法与加法运算-c语言实现
目录 一.题意理解 二.求解思路 三.多项式的表示 3.1 数组 3.2 链表 四.程序框架搭建 五.如何读入多项式 六.如何将两个多项式相加 七.如何将两个多项式相乘 八.如何将多项式输出 一.题意 ...
- jQuery的加法运算,val()获取的结果相加变成了字符串连接。
加法运算 ?想必大家听到这都会不屑了,加法运算这是多么简单的运算.然而有的时候在jQuery也让人挺头疼的. 常规的是: var num1 = 123; var num2=123; var total ...
- WeX5的简单介绍及UI的简单讲解
WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...
随机推荐
- golang学习笔记7 使用beego swagger 实现API自动化文档
golang学习笔记7 使用beego swagger 实现API自动化文档 API 自动化文档 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/doc ...
- ELKF安装使用教程。elasticsearch+logstash+kibana+filebeta。
近期因工作需要学习了ELKF的安装和使用.网络上的中文我看大部分也比较老版本了,我想写一下,希望能给他人带来一点帮助.小弟不才,有错位之处,还请大家原谅指点. ELKF就是:elasticsearch ...
- tomcat查看并修改jvm大小
JVM--Java Virtual Machine,Java虚拟机:tomcat不是直接运行在物理操作系统上,而是运行在Java虚拟机上,通常说的配置jvm就是配置分配给Java虚拟机的内存大小: 如 ...
- shell命令行快捷键
ctrl+a[A]:将光标移到命令行开头 ctrl+e[E]:将光标移到命令行结尾 ctrl+c[C]:强制终止命令执行 ctrl+u[U]:删除/剪切光标之前的所有字符 ctrl+y[Y]:粘贴ct ...
- 一线互联网常见的 14 个 Java 面试题,你颤抖了吗程序员
跳槽不算频繁,但参加过不少面试(电话面试.face to face 面试),面过大 / 小公司.互联网 / 传统软件公司,面糊过(眼高手低,缺乏实战经验,挂掉),也面过人,所幸未因失败而气馁,在此过程 ...
- Python基本数据类型——列表
序列 序列是Python中的内置数据结构,常见的序列有:列表.字典.元组. 所有的序列都有自己的索引,程序可以通过索引来访问对应的值. 列表 list list是Python的一种最常见的内置数据类型 ...
- linux交换区使用过多导致的性能问题
近日,我们开发发现有一台配置相同的服务器跑的特别慢,相同数据量的情况下,其他服务器只要跑10分钟,这台服务器要跑50分钟,经确认,所有的应用层配置参数都相同.上去之后,发现该服务器swap使用比较多, ...
- 理解Linux文件系统之 inode
一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做”扇区”(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取硬盘的时候,不会 ...
- ChromeDriver与Chrome版本对应关系
备注: 下载ChromeDriver的时候,可以在notes.txt文件中查看版本对应关系. ----------ChromeDriver v2.29 (2017-04-04)---------- S ...
- git常见使用场景总结
1.怎么回退到之前的commit? 用git reset --hard HEAD回退到最新提交的版本 用git reset --hard HEAD^回退到上一个版本 用git reset --hard ...