使用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是前端快速开发框架,可开发跨端运行应用.是 ...
随机推荐
- JustOj 1910: 人见人爱A+B
[提交][状态][讨论版] 题目描述 北大的acm上面已经有10来道A+B的题目了,相信这些题目曾经是大家的最爱,希望今天的这个A+B能给大家带来好运,也希望这个题目能唤起大家对ACM曾经的热爱. ...
- Codeforce 791A - Bear and Big Brother
Bear Limak wants to become the largest of bears, or at least to become larger than his brother Bob. ...
- [转载]C# 常用日期时间函数(老用不熟)
原博地址:http://www.jb51.net/article/20181.htm --DateTime 数字型 System.DateTime currentTime=new System.Dat ...
- 计算概论(A)/基础编程练习(数据成分)/1:短信计费
#include<stdio.h> int main() { // 输入当月发送短信的总次数n和每次短信的字数words int n,words; scanf("%d" ...
- Opencv改变图像亮度和对比度以及优化
https://blog.csdn.net/u013139259/article/details/52145377 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- linux shell习题
课件地址:https://wenku.baidu.com/view/bac2ff10f18583d0496459f3.html 1.测试环境变量:HOME,PWD,IFS等2.测试位置变量:$$,$# ...
- mysqldump 使用小结
语法: 备份某个数据库: mysqldump -uroot -p*** [options] –-databases DB_name > back_db_name.sql --databases: ...
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- spring @Value注解#和$区别
一直以来,在使用@Value注解的时候,都是使用#的风格@Value("#{topic.topicName}"),但是也经常会看到@Value("${topic.topi ...
- 3、pandas的loc和iloc数据筛选
选择列: 选择一列: 选择多列(选择的内容变成list,也就是要两个方括号): 选择一行或多行(loc函数): 选择连续的行(以索引标签为选择参数): 选择非连续的行(以索引标签为选择参数): 选择包 ...