Redux 为何存在

Redux 专门用于管理状态

Redux 官方文档对 Redux 的定义如下:

一个面向 JavaScript 应用的可预测状态容器。

你可能会问,“如果 React 已经在为我的应用管理前端状态,为何还需要 Redux?”

使用 Redux 的主要优势之一是它可以帮你处理应用的共享状态。如果两个组件需要访问同一状态,该怎么办?这种两个组件同时需要访问同一状态的现象称为“共享状态”。你可以将该状态提升到附近的父组件,但是如果该父组件在组件树中向上好几个组件的位置,那么将状态当做属性向下一个一个地传递,这项工作很快就会变得乏味。此外,在该父组件和该子组件之间的组件甚至根本不需要访问该状态!

在构建 web 应用时,Redux 不仅使我们能够以有条理的方式 存储 数据,而且使我们能够在应用的任何位置快速 获取 该数据。只需告诉 Redux 到底哪个组件需要哪个数据,它就会为你处理后续一切工作!

借助 Redux,你可以控制状态改变的时间、原因和方式。

Store:单一数据源

Redux 的基本原则之一是存在单一数据源:Store。也就是说,Store 包括应用的全局状态,全存储在一个对象树中。

只有单个状态树,对于应用的很多方面都有好处。假设在构建应用时尝试实现撤消/重做功能。如果所有状态都存储在一个树(单一数据源)中,则实现起来比数据分散在多个组件中简单多了。状态集中到一个位置后,调试和检测过程也会简单很多!

为了保持这种单一数据源特性,Redux 制定了几条规则,确保一切尽在掌控。规则一:Redux 应用中的状态是只读的,即 Redux 状态 不可变。例如,React 组件不能直接写入 Redux 状态,而是发出 intent 来更新状态。

实际上,只有叫做reducer的纯函数能够更改状态。暂时别担心这些概念,我们会在下节课深入讲解的!

随着单页面应用变得越来越复杂,正确地管理状态这一需求更加重要。例如,除了管理表格状态(例如《React 基础知识》课程中的 Contacts 应用)等数据外,应用可能还需要管理:

  • 服务器响应
  • 缓存的数据(例如用户)
  • 尚未保存到服务器上的本地数据

除此之外,UI 状态也越来越复杂。同一应用可能还需要跟踪:

  • 当前路由
  • 当前选择的标签页
  • 页码控件

Redux 便因此而生,它专门用于管理上述所有这些内容。创建者 Dan Abramov 在 2015 年根据 Flux 架构创建了 Redux,并从 Elm 编程语言中汲取了经验。从那以后,Redux 变得越来越受欢迎,每月的下载量达到数百万。

总结

Redux 是一个 JavaScript 库,用于管理应用的前端状态。Redux 并非 React 应用的必须条件,但是随着网络应用的复杂性越来越高,状态管理不当可能会导致 bug。Redux 应用中的全局状态存储在单一数据源 store 中。因为状态的更新受到严格控制,使得 Redux 非常具有可预测性。实际上,开发人员喜欢 Redux 的主要原因之一就是它的可预测性。我们来看看背后的原因!

更多资料

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 本文将开始详细分析如何搭建一个React应用架构。 一. 前言 现在已经有很多脚手架工具,如create-reac...
    字节跳动技术团队阅读 4,272评论 1 23
  • 什么是Redux它为什么存在 Redux专门用于管理状态 Redux官方文档对Redux的定义如下: 一个面向Ja...
    ccchaixr阅读 34,819评论 2 19
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,376评论 25 707
  • 《太阳的后裔》播出六集啦,第七集六天后才播出,宝宝心里苦,但宝宝不说。 大家都在谈论宋仲基如何撩妹,乔妹如何撩汉子...
    李清浅阅读 3,088评论 9 22
  • 可变参数 参数数量可变的函数称为可变参数函数 在声明可变参数函数时,需要在参数列表的最后一个参数类型之前加上省略符...
    楠小忎阅读 1,559评论 0 0