描述该做啥?(action)!具体怎么做(reducer)!统一规划(store:包含reducer+所有的state)

上代码:index.ios.js

  1. import React, { Component } from 'react';
  2. import {
  3. AppRegistry,
  4. } from 'react-native';
  5. import { Provider } from 'react-redux';
  6.  
  7. import {createStore} from 'redux';
  8. import APP from './app';
  9.  
  10. //创建reducer,传入初始化的状态,和需要改变的元素描述:action
  11. //初始化状态
  12. const initialState={defaultNum:10};
  13. function add(state=initialState,action){
  14. console.log("2"+action.type);
  15. switch (action.type) {
  16. case "ADD_ONE":
  17. let ss=Object.assign({},state,{defaultNum:state.defaultNum-1})
  18. return ss;
  19. default:
  20. return state;
  21. }
  22. }
  23.  
  24. class test extends Component{
  25. constructor(props){
  26. super(props);
  27. this.state={
  28. store:createStore(add),
  29. };
  30. }
  31. render(){
  32. return(
  33. <Provider store={this.state.store}>
  34. <APP store={this.state.store}/>
  35. </Provider>
  36. );
  37. }
  38. }
  39. AppRegistry.registerComponent('test', () => test);

在上面的入口代码中,先是定义了reducer,来具体做一些事,用reducer作为参数来创建store,然后通过Provider来将store传入入口<APP/>组件中!然后看APP.js的代码:

  1. import React, { Component } from 'react';
  2. import {
  3. AppRegistry,
  4. StyleSheet,
  5. Text,
  6. View,
  7. } from 'react-native';
  8. import {connect} from 'react-redux';
  9. //action
  10. let action={type:"ADD_ONE"};
  11.  
  12. class APP extends Component {
  13. constructor(props){
  14. super(props);
  15. this.state={
  16.  
  17. }
  18. }
  19. _onpress(){
  20. console.log("1"+this.props.defaultNum);
  21. this.props.dispatch(action);
  22. }
  23. render() {
  24. return (
  25. <View style={styles.container}>
  26. <Text style={styles.text} onPress={this._onpress.bind(this)}>{this.props.defaultNum}</Text>
  27. </View>
  28. );
  29. }
  30. }
  31. const styles = StyleSheet.create({
  32. container: {
  33. flex: 1,
  34. justifyContent: 'center',
  35. alignItems: 'center',
  36. backgroundColor: '#F5FCFF',
  37. },
  38. text:{
  39. fontSize:40
  40. }
  41.  
  42. });
  43. function select(state){
  44.  
  45. console.log("3"+state.defaultNum);
  46. return {defaultNum:state.defaultNum}
  47. }
  48. export default connect(select)(APP)

在APP.js代码中,我们首先定义了action(当然这些都是可以在外部写的) 然后通过文本的点击事件触发action,将这个action通过store中的dispatch分发到reducer中!那么

  1. export default connect(select)(APP)
    就是包装APP组件,将storedispatch方法传入this.props中!
    reducer运行结束后,返回的数据由
  1. export default connect(select)(APP)
    中的select来更新当前的数据。
  2.  
  3. 相关链接: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. maven 入门 (二)

    上一篇写了,怎么在在项目中用到maven,怎么安装maven及创建maven工程. 现在的话说一下怎么使用maven来下载jar包,呵呵.和maven的一些配置. 打开maven-config-set ...

  2. QT -- plan

     QT  --  跨平台的 C++ 图形用户界面  应用程序框架 GUI介绍框架项目文件  .pro第一个QT (hello QT)父窗口 和 子窗口的区别(控件,部件,构件)信号 和 槽(信号的处理 ...

  3. 102.自己实现ArrayList

    package collection; import java.util.ArrayList; import java.util.List; /** * 自己实现一个ArrayList,帮助理解底层结 ...

  4. 对gulp的理解和使用(一)

    说的gulp,到底是什么?用来做什么的? 以前并没有想过这个问题,拿到公司的项目脚手架就开始做事情了.现在专门来总结一下. gulp干什么的呢? gulp是node中的一种代码构建工具,还有就是项目自 ...

  5. ES6知识整理(7)--Set和Map数据结构

    (文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) Set构造函数 初始化一个值不重复的数组,适合做数组去重. 2种数组去重的方法: 这里再说下Array.from(),表示以一个类数组|| ...

  6. linux+nginx+mysql+php环境下,安装ecshop

    我们在工作过程中要经常和电商打交道,所以,学会安装ecshop是必须的. 下面我们来介绍一下ecshop的安装. nginx和php安装整合,在我前面的文章中有提到,这里就不做赘述了.mysql可以使 ...

  7. PYQT5 + PYCHARM

    PYQT5 C:\Users\xxx\AppData\Local\Programs\Python\Python37\Lib\site-packages\pyqt5_tools\designer.exe ...

  8. MySql数据库表操作(二)

    一.增加表记录: insert [into] tab_name (field1,field2....) values (values1,values2....) , (values1,values2. ...

  9. markdown 换行

    基本语法 basic grammar line break

  10. k8s开发环境

    在搭建开发环境之前, 请Try Kubernetes,Get Started and CONCEPTS 可以自己使用minikube 来搭建个环境, 自己玩一玩. K8s需要一些依赖. 参看官方文档 ...