使用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是前端快速开发框架,可开发跨端运行应用.是 ...
随机推荐
- maven 入门 (二)
上一篇写了,怎么在在项目中用到maven,怎么安装maven及创建maven工程. 现在的话说一下怎么使用maven来下载jar包,呵呵.和maven的一些配置. 打开maven-config-set ...
- QT -- plan
QT -- 跨平台的 C++ 图形用户界面 应用程序框架 GUI介绍框架项目文件 .pro第一个QT (hello QT)父窗口 和 子窗口的区别(控件,部件,构件)信号 和 槽(信号的处理 ...
- 102.自己实现ArrayList
package collection; import java.util.ArrayList; import java.util.List; /** * 自己实现一个ArrayList,帮助理解底层结 ...
- 对gulp的理解和使用(一)
说的gulp,到底是什么?用来做什么的? 以前并没有想过这个问题,拿到公司的项目脚手架就开始做事情了.现在专门来总结一下. gulp干什么的呢? gulp是node中的一种代码构建工具,还有就是项目自 ...
- ES6知识整理(7)--Set和Map数据结构
(文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) Set构造函数 初始化一个值不重复的数组,适合做数组去重. 2种数组去重的方法: 这里再说下Array.from(),表示以一个类数组|| ...
- linux+nginx+mysql+php环境下,安装ecshop
我们在工作过程中要经常和电商打交道,所以,学会安装ecshop是必须的. 下面我们来介绍一下ecshop的安装. nginx和php安装整合,在我前面的文章中有提到,这里就不做赘述了.mysql可以使 ...
- PYQT5 + PYCHARM
PYQT5 C:\Users\xxx\AppData\Local\Programs\Python\Python37\Lib\site-packages\pyqt5_tools\designer.exe ...
- MySql数据库表操作(二)
一.增加表记录: insert [into] tab_name (field1,field2....) values (values1,values2....) , (values1,values2. ...
- markdown 换行
基本语法 basic grammar line break
- k8s开发环境
在搭建开发环境之前, 请Try Kubernetes,Get Started and CONCEPTS 可以自己使用minikube 来搭建个环境, 自己玩一玩. K8s需要一些依赖. 参看官方文档 ...