描述该做啥?(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简单的实现加法运算(简单的状态改变)的更多相关文章

  1. 简单的新手加法运算(基于Struts2)

    软件151  王帅 在搭好框架的前提下,首先编写action.java文件: import com.opensymphony.xwork2.ActionSupport; public class Us ...

  2. ajax 的简单请求,get的加法运算,post加法运算,用户登录认证

    视图函数部分 from django.shortcuts import render, HttpResponse import time from app01.models import User i ...

  3. jQuery的加法运算.

    jQuery的加法运算. 加法运算 ?想必大家听到这都会不屑了,加法运算这是多么简单的运算.然而有的时候在jQuery也让人挺头疼的. 常规的是: var num1 = 123; var num2=1 ...

  4. 整数运算:CPU内部只有加法运算

    学汇编的一边儿去.我这里讲的是CPU进行计算的原理.首先我这里用MC的红石电路模拟了一个加法器:http://www.0xaa55.com/thread-313-1-1.htm首先加法器是怎么实现的呢 ...

  5. RNN入门(4)利用LSTM实现整数加法运算

      本文将介绍LSTM模型在实现整数加法方面的应用.   我们以0-255之间的整数加法为例,生成的结果在0到510之间.为了能利用深度学习模型模拟整数的加法运算,我们需要将输入的两个加数和输出的结果 ...

  6. HDU 1002 (高精度加法运算)

    A + B ProblemII Time Limit: 2000/1000 MS(Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  7. 小白专场-多项式乘法与加法运算-c语言实现

    目录 一.题意理解 二.求解思路 三.多项式的表示 3.1 数组 3.2 链表 四.程序框架搭建 五.如何读入多项式 六.如何将两个多项式相加 七.如何将两个多项式相乘 八.如何将多项式输出 一.题意 ...

  8. jQuery的加法运算,val()获取的结果相加变成了字符串连接。

    加法运算 ?想必大家听到这都会不屑了,加法运算这是多么简单的运算.然而有的时候在jQuery也让人挺头疼的. 常规的是: var num1 = 123; var num2=123; var total ...

  9. WeX5的简单介绍及UI的简单讲解

    WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...

随机推荐

  1. vue 父子组件

    组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...

  2. pytest+request 接口自动化测试

    1.安装python3brew update brew install pyenv 然后在 .bash_profile 文件中添加 eval “$(pyenv init -)” pyenv insta ...

  3. Win10+Ubuntu16.04双系统安装过程中遇到的一些问题及解决办法

    前两天闲来无聊重装了系统,装的是win10 64的系统,后来心血来潮索性再装Ubuntu,搞成win10+Ubuntu双系统. win10系统的镜像文件可以通过MSDN网站获取,MSDN是一个很可靠的 ...

  4. winform跨线程访问控件

    首先说下,.net 2.0以后加强了安全机制,不允许在winform中直接跨线程访问控件的属性.所以除了控件所在的线程外的线程调用会抛异常 (Cross-thread operation not va ...

  5. GROUP BY 和 ORDER BY 同时使用问题

    GROUP BY 和 ORDER BY一起使用时,ORDER BY要在GROUP BY的后面.

  6. Linux环境nginx的安装

    安装Nginx前需要编译环境和库文件支持: 1.安装make: yum -y install openssl openssl-devel yum -y install gcc automake aut ...

  7. python opencv 检测特定颜色

    import cv2 import numpy as np cap = cv2.VideoCapture(0) # set blue thresh 设置HSV中蓝色.天蓝色范围 lower_blue ...

  8. The POM for XXX is invalid, transitive dependencies (if any) will not be available解决方案

    今天,某个开发的环境在编译的时候提示警告The POM for XXX is invalid, transitive dependencies (if any) will not be availab ...

  9. 第五章 CSS常用属性笔记

    1. span标签 突显,强调局部文字的作用. 2.字体样式 font-size: 字体大小 font-style:normal,italic(倾斜) font-weight:normal,bold( ...

  10. PO VO BO DTO POJO DAO之间的关系

    J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了. PO:persistant ...