现在让我们看看大致的流程:

  • 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数据的更多相关文章

  1. 使用Redux管理React数据流要点浅析

    在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state.组件所有的行为通过Actions来触发,然后Action更新Store中的stat ...

  2. 使用Redux管理你的React应用

    因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...

  3. Redux管理你的React应用

    使用Redux管理你的React应用   因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...

  4. React Native环境配置和简单使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  5. React Native之配置开发环境

    安装前注意: 1)在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题.可以使用下面的命令修复: sudo ch ...

  6. 配置React Native的开发环境

    本文转载自:http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a919 ...

  7. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  8. React Native集成Redux框架讲解与应用

    学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...

  9. react native 中的redux 理解

    redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...

随机推荐

  1. localStorage单页面及不同页面监听变动

    分析 H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,而Web Storage提供了两种存储类型 API:  s ...

  2. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

  3. centos 6.8操作系统安装arcgis server 10.4

    1.检查操作系统中软件包的安装,第一条和第二条是图形界面工具,可以不装. 可以用rpm -qa | grep 软件名   命令检查软件包是否已经安装 主机名不能包含下划线,可以用hostname检查主 ...

  4. 在CentOS 6.X中安装中文字体

    1.从Windows中 拷贝或者网络上下载你想要安装的字体文件(*.ttf文件) 2.新建字体目录 #mkdir /usr/share/fonts/ 3.修改字体文件的权限,使root用户以外的用户也 ...

  5. hive 中简单的udf函数编写

    .注册函数,使用using jar方式在hdfs上引用udf库. $hive.注销函数,只需要删除mysql的hive数据记录即可. delete from func_ru ; delete from ...

  6. Spring Boot 实现RESTful webservice服务端实例

    1.Spring Boot configurations application.yml spring: profiles: active: dev mvc: favicon: enabled: fa ...

  7. tomcat日志警告WARNING: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'debug' to '0' did not find a matching property.

    日志中有警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'debug' to '0' did ...

  8. UI自动化(一)html基础

    前端的三把利器 HTML:赤裸的一个人 CSS:华丽的衣服 JS/JavaScript:赋予这个人的行为,也就是动起来 DOM 就是将页面变成可操 HTML(超文本标记语言) html代码实际上就是一 ...

  9. 闭包引起的onclick不起作用

    问题描述:在html页面绑定onclick="cli()" 方法,定义在$(function( function cli(){} ))不起作用 $(function(){ func ...

  10. Stanford CS231n实践笔记(课时22卷积神经网络工程实践技巧与注意点 cnn in practise 上)

    本课主要2个实践内容: 1.keras中数据集丰富,从数据集中提取更多特征(Data augmentation) 2.迁移学习(Tranform learning) 代码:https://github ...