Redux 管理React Native数据
现在让我们看看大致的流程:
- React 可以触发 Action,比如按钮点击按钮。
- Action 是对象,包含一个类型以及相关的数据,通过 Store 的
dispatch()函数发送到 Store。 - Store 接收 Action 的数据并将其连同当前的
state树(state树是包含所有state的一种特殊的数据结构,是一个单一的对象)发给 Reducer。 - Reducer 是一个多个函数的合成函数(当然一般都是),它接收一个之前的
state和一个 Action;并基于此 Action 将会产生的影响,返回一个新的state。一个 app 可以包含一个 Reducer,但大部分的 app 最后会包含多个,每个处理state中不同的部分,下文 会提到。 - Store 接收到新的
state,并替换当前的。 - 当
state变化时,Store 触发 事件。 - 任何 订阅了事件 的组件 从 Store 中提取新的
state。 - 组件使用新的
state进行更新。
简单起见,这个流程可用下图表示:

你可以看到数据随着一个很清晰的单项路径流动,没有重叠,没有反方向的数据流。这图也展示了 app 的每一部分可以多么清晰地分开:
- Store 只关心所只有的
state; - View 中的组件,只关心显示数据和触发 Action;
- Action 只关注
state中的某些数据发生变化了,并包含了这些数据; - Reducer 只关注旧的状态并将 Action 放入到
state中。
一切都是模块化的,非常优雅。当阅读这样的代码的时候,表意非常明显,很容易理解。
推荐网站:https://f8-app.liaohuqiu.net/tutorials/building-the-f8-app/data/
Redux 管理React Native数据的更多相关文章
- 使用Redux管理React数据流要点浅析
在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state.组件所有的行为通过Actions来触发,然后Action更新Store中的stat ...
- 使用Redux管理你的React应用
因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...
- Redux管理你的React应用
使用Redux管理你的React应用 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...
- React Native环境配置和简单使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- React Native之配置开发环境
安装前注意: 1)在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题.可以使用下面的命令修复: sudo ch ...
- 配置React Native的开发环境
本文转载自:http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a919 ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
- react native 中的redux 理解
redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...
随机推荐
- CAN学习网站
百度搜索:Controller Area Network http://www.esd-electronics-usa.com/Controller-Area-Network-CAN-Introduc ...
- bzoj2049 [Sdoi2008]Cave 洞穴勘测 link cut tree入门
link cut tree入门题 首先说明本人只会写自底向上的数组版(都说了不写指针.不写自顶向下QAQ……) 突然发现link cut tree不难写... 说一下各个函数作用: bool isro ...
- [转载]web安全之token
参考:http://blog.csdn.net/sum_rain/article/details/37085771 Token,就是令牌,最大的特点就是随机性,不可预测.一般黑客或软件无法猜测出来. ...
- CentOS7安装MySQL冲突和问题解决小结
摘自:https://blog.csdn.net/typa01_kk/article/details/49059729 问题1: [root@localhost install-files]# rpm ...
- 大数据自学5-Python操作Hbase
在Hue环境中本身是可以直接操作Hbase数据库的,但是公司的环境不知道什么原因一直提示"Api Error:timed out",进度条一直在跑,却显示不出表. 但是在CDH后台 ...
- Python爬虫【四】Scrapy+Cookies池抓取新浪微博
1.设置ROBOTSTXT_OBEY,由true变为false 2.设置DEFAULT_REQUEST_HEADERS,将其改为request headers 3.根据请求链接,发出第一个请求,设置一 ...
- 计算概论(A)/基础编程练习2(8题)/7:整数的个数
#include<stdio.h> int main() { ] = {}; // 输入k个正整数 scanf("%d",&k); // 循环读入和进行算术 w ...
- 2017第十三届湖南省省赛A - Seating Arrangement CSU - 1997
Mr. Teacher老师班上一共有n个同学,编号为1到n. 在上课的时候Mr. Teacher要求同学们从左至右按1, 2, …, n的顺序坐成一排,这样每个同学的位置是固定的,谁没来上课就一目了然 ...
- django 生成动态的PDF文件
需要依赖库. WeasyPrint,它是一个Python库可以生成PDF文件从HTML模板中.安装WeasyPrint pip install WeasyPrint 创建一个PDF模板(templat ...
- 在Vmware中安装CentOS7
想要安装linux系统,在电脑上先装一个虚拟机,当然装双系统也是可以的.首先准备材料,3步:1.从CentOS的官网上下载CentOS7,DVD ISO版本,大概4G左右.名称:CentOS-7-x8 ...