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

  • 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. TensorFire:WEB端的高性能神经网络框架

    TensorFire:WEB端的高性能神经网络框架 摘要: 近日,一种专门用于在网页内执行神经网络算法的JavaScript库——TensorFire引起了人们的关注,这种JavaScript库在浏览 ...

  2. 如何干净卸载mysql

    一.在控制面板中卸载mysql软件: 二.卸载过后删除C:\Program Files (x86)\MySQL该目录下剩余了所有文件,把mysql文件夹也删了: 三.windows+R运行“reged ...

  3. zabbix 服务端安装(server)

    zabbix版本:Zabbix 2.2 LTS 备注:Linux下安装zabbix需要有LAMP或者LNMP运行环境 准备篇: 一.Web环境:Nginx+MySQL+PHP CentOS 7.0编译 ...

  4. right spindle supply short to gnd-- compact version

    hardware guy found that the R1004 lead to this error, but this error should not be checked, because ...

  5. kivy 使用webview加载网页

    from kivy.app import App from kivy.uix.widget import Widget from kivy.clock import Clock from jnius ...

  6. composer 报错:Failed to decode response: zlib_decode(): data error 解决办法

    执行命令 composer require particle/validator 报错 Failed to decode response: zlib_decode(): data error 网上推 ...

  7. Fiddler(三)Fiddler 报错creation of the root certificate was not successful

    打开CMD,找到Fiddler所在目录,我这里是把汉化版的解压在了桌面,所以通过CMD进入桌面下的Fiddler文件夹. 执行命令 makecert.exe -r -ss my -n -h -cy a ...

  8. 跟阿铭学Linux习题答案

    第一章:走进Linux 1.简述它的发展历史,列举几种代表性的发行版 Linux之前是Unix,由于Unix收费昂贵,so,Richard Stallman 发起了开发自由软件的运动,并成立了自由软件 ...

  9. CocoaPods出错

    1 Error: pod search Masonry /usr/local/lib/ruby/gems/2.3.0/gems/cocoapods-1.4.0.beta.2/lib/cocoapods ...

  10. k倍区间 前缀和【蓝桥杯2017 C/C++ B组】

    标题: k倍区间 给定一个长度为N的数列,A1, A2, ... AN,如果其中一段连续的子序列Ai, Ai+1, ... Aj(i <= j)之和是K的倍数,我们就称这个区间[i, j]是K倍 ...