想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！

你晓得 Redux 真正的作用远不止状况治理吗？ 你是不是想要相识 Redux 的事变道理？ 让我们深切研究 Redux 可以做什么，它为何做它的事变，它的瑕玷是什么，以及它与设想有哪些关联？

你听说过 Redux 吗?它是什么? 请不要用 Google 搜刮

• 花梢的后端的东西
• 我听说过它，但我不晓得它是什么，这多是一个 React 框架
• 是一种在 React 运用中存储治理状况的更好体式格局

这个题目，我问过 40 多位设想师，以上是他们的典范回复。他们中的许多人都晓得 Redux 与React 一同事变，它的事变是状况治理。

本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为何它要如许设想？什么时刻运用它？以及它与设想有哪些关联？

我的目的是协助像你们如许的设想师。纵然您之前没有写过一行代码，我以为明白 Redux依然是可以的、有益的和风趣的。

什么是 Redux

在超高水平上，Redux 是开辟人员用来简化他们事变的东西。你们许多人可以都听说过，它的事变是状况治理。稍后我将诠释状况治理的寄义， 如今，我只能想让你看下面这张图:

为何要相识 Redux

Redux 更多的是关于运用程序的内部事变而不是它的表面和感觉。 这是一个有点庞杂的东西，进修曲线相对峻峭，但这是不是意味着我们作为设想师应当阔别它？

不。我以为我们应当拥抱它。汽车设想师应当相识引擎的用处，对吗?为了胜利地设想运用程序界面，设想师还应当对底层的东西有踏实的相识。我们应当相识它可以做什么，明白开辟人员为何运用它，并相识它的上风和寄义。

Redux 可以做什么

开辟人员在 React 运用中运用 Redux 来治理状况。这最罕见的用法，Redux 改进了React(还没有)做得不好的方面。

然则，你很快就会发明 Redux 的真正功用远远不止于此，让我们从相识状况治理的真正寄义最先。

状况治理

假如你不确定这个状况意味着什么，让我们用一个更通用的术语来替换它:数据。状况是不停变化的数据，状况决议在用户界面上显现什么。

状况治理是什么意义? 平常来说，我们须要在运用程序中治理三个方面的数据

1. 猎取和存储数据
2. 将数据绑定到 UI 元素
3. 转变数据

比方我们要做一个 Dribbble 的作品页面。在功课页面上我们想要展现的数据有哪些？个中包括作者的头像照片、称号、动态 GIF 图片、点赞数目、批评，以及等等。

起首，我们须要从云服务器猎取统统这些数据并将其放在某个位置。接下来，我们须要现实显现数据。我们须要将这些数据分配给对应的 UI 元素，这些 UI 元素示意我们在浏览器中现实看到的内容。比方，我们将头像照片的 URL 分配给 img 标签的 src 属性:

<img src='https://url/to/profile_photo'>

末了，我们须要处置惩罚对数据的变动。比方，假如用户向Dribbble shot增添批评或点赞，我们须要更新相应的 HTML。

谐和状况的这三个方面是前端开辟的重要组成部分，React 对这项使命有差别水平的支撑。有时刻 React 中的内置功用运转得充足好。但随着运用程序变得愈来愈庞杂，仅凭React 可以会更难治理它的状况。这就是为何许多人最先运用Redux作为替换。

猎取和存储数据

在React中，我们将UI分解为组件。这些组件都可以分解为更小的组件。

图片形貌

假如我们的 UI 是如许组织的，那末在添补UI之前，我们什么时刻猎取数据以及在那里存储数据

假定每一个组件中都有一个厨师。从服务器猎取数据就好比是采购所需的统统原材料以预备好菜。

一种简朴的要领是在须要的处所和时刻猎取和存储数据。这就像每一个厨师直接从悠远的农场购置蔬菜和肉类一样。

这类要领是很糟蹋的。纵然关于雷同的数据，我们也须要从多个组件屡次要求服务器。厨师会糟蹋多量的汽油和时刻往返奔走。

运用Redux，我们只猎取一次数据并将其存储在一个中心位置，称为 store。然后，任何组件都可以随时运用这些数据。这就像四周有一家超市，我们的厨师可以在那里买到统统的食材。这家超市派卡车从农场多量运回蔬菜和肉类。这比让平常厨师亲身去农场效率高许多。

store 照样唯一的数据源。组件平常从 store 中猎取数据，而不是其他处所。这使得 UI 坚持高度一致。

将数据绑定到 UI 元素

假如单单运用 React 的话，现实上有一种更好的要领来猎取和存储数据。我们可以请我们异常仁慈的厨师Shotwell为他统统的厨师朋侪购物。他会开一辆卡车去农场，把货色运回。我们可以从容器组件中猎取数据，比方 Dribbble 示例中的 Shot 组件，并将其用作单一的数据泉源。

这类要领比从每一个组件猎取数据的简朴要领更有用。然则 Shotwell 是如何将配料通报给其他厨师的呢? 如何将数据通报给现实衬着 HTML 元素的组件? 我们将数据从外部组件通报到内部组件，就像接力棒一样，一向通报到数据抵达目的地。

比方，作者头像的 URL 须要从 Shot 通报到ShotDetail、Title，末了通报到<img> 标签。假如我们的厨师住在公寓里，它看起来就像如许：

要将数据交付到目的地，我们必需运用途径上的统统组件，纵然它们基础不须要数据。假如有许多层的话，那就太烦人了。

假如超市能送货上门呢? 运用 Redux，我们可以将任何数据插进去任何组件，而不影响其他组件，就像如许

更正确地说，现实上是另一个叫做 react-redux 的库将数据供应给组件的，而并不是 Redux 自身。但因为 react-redux 自身只是个衔接库，而且开辟者平常一同运用 Redux 和 react-redux ，因而我以为将它当作是 Redux 的优点之一是并没有不妥。

注重:在React(16.3)的最新版本中，有一个新的
context API，它的提取数据功用险些与 Redux 是雷同的。因而，假如你的团队运用 Redux 的唯一缘由是为了提取数据，无妨细致斟酌升级到 React 16.3!

转变数据

有时刻，在运用程序中更新数据的逻辑可以相称庞杂。它可以触及多个相互依赖的步骤。在更新运用程序状况之前，可以须要守候多个服务器的相应。我们可以须要在差别的时刻、差别的前提下更新多处 state 的状况。

假如我们没有一个合适统统逻辑的优越构造，很轻易让人使人手足无措，代码也很难明白和保护。

Redux 让我们分而治之。 它供应了一种将数据更新逻辑分解为小“reducer”的规范要领。 这些 reducer 调和地协同事变以完成庞杂的行动。

Redux 的真正威力

到目前为止，Redux 看上去只是 React 的辅助东西。开辟者运用它来处理 React 的某些痛点。但 React 正在疾速动手处理这些题目！事实上，Redux 的作者 Dan Abramov 在几年前已加盟 Facebook 的 React 中心团队。他们一向致力于提拔 React 的开辟体验: context API (16.3版本宣布)、更好的数据猎取 API (概况请见 Dan Abramov 于2018年2月的演讲)、更好的 setState API，等等。

它会使 Redux 过期吗？

你猜怎么著？ 我还没有向你展现Redux的真正气力！

Redux 迫使开辟人员遵照一些严厉的划定规矩，这给 Redux 带来了壮大的功用。

1. 统统数据（运用程序状况）必需以明文情势形貌。 你应当可以用笔在纸上写下统统数据。
2. 每一个行动(数据的变动)都必需用清楚的笔墨来形貌。你必需把你要做的事写下来，然后再做转变。你不能转变数据而不留下陈迹。在 Redux 的术语中这称之为 “派发 (dispatching) 行动”。
3. 变动数据的代码必需像数学公式一样。 在雷同输入的情况下，它必需返回雷同的效果。 不管你运转多少次，4 的平方老是 16。

当你遵照上述准绳来开辟运用的话，难以设想的事变就来了。Redux 将开启许多很酷的特征，这些特征运用其他手艺很难完成，或许完成起来本钱很高。下面是一些例子。

我从 Dan Abramov 文章 “You Might Not Need Redux” 和 “React Beginner Question Thread.” 中收集了一些示例。

打消、重做

盛行的 打消/重做 功用须要体系级计划。因为打消/重做须要纪录和回放运用程序中的每一次数据变动，所以你必需从一最先就在架构中斟酌到这一点。假如是预先才想到的，那就须要修正许多文件，这是无数毛病的泉源。

正因为 Redux 须要每一个行动都以文本的情势举行形貌，所以可以说是天生就支撑取消/重做。这个文档中引见了如何运用 Redux 来完成取消/重做。

合作环境

假如你要构建相似于 Google Docs 的运用，个中多个用户在庞杂使命上协同事变，请斟酌运用 Redux。 它可以为你完成多量沉重的事变。。

Redux 可以异常轻松地经由过程收集发送正在发作的事变。 吸收另一个用户在另一台机械上实行的支配，重放变动并与当地发作的支配合并是很简朴的。

OPTIMISTIC UI

Optimistic UI 是 Meteor 提出来的一种前端界面疾速响运用户交互的观点，之前叫 Latency Compensation，重要作用是在客户端直接响运用户的交互，而不必等信息从客户端发送到服务器，完成更新确认，再从服务器返回客户端这一个往返完成后再做相应。有点相似游戏范畴里的 Dead Reckoning，在客户端离线对用户行动举行推想，到达隐蔽延时和削减带宽运用的手艺。

举一个简朴的例子，在Twitter运用程序中，你的点赞它须要要求服务器举行一些搜检，比方，该推文是不是依然存在。 Optimistic UI 的做法不是传统的转圈守候几秒，然后显现效果，而是挑选诳骗用户！它事前假定统统要求都是胜利的，当用户点赞时直接+1。

这类体式格局有用的缘由在于大多数时刻要求都是平常的。当要求失利是，运用只需回滚至前一个 UI 状况即可，并运用服务器相应的现实效果，比方显现毛病信息。

犹如取消/重做一样，Redux 也支撑 Optimistic UI。 当从服务器收到否认效果时，可以轻松纪录，重放和复原数据变动。

耐久化和从状况启动

Redux 可以很轻易地将运用程序中发作的事变保留到当地存储中。以后，纵然电脑重启，运用程序也可以加载统统数据，并从完整雷同的位置继承运转，就像从未中断过一样。

假如你运用 Redux 构建游戏，则只须要几行代码来保留/加载游戏进度，而无需变动其他代码。

真正可扩大的体系

运用 Redux，你必需“dispatch”一个 action 来更新运用程序中的任何数据。 这类限定使我们可以深切相识运用程序中发作的各个方面。

你可以构建真正可扩大的运用，个中每一个功用都可以由用户来自定义。比方，参考 Hyper ，这是一个运用 Redux 开辟的终端运用。“hyperpower” 插件增添了光标的闪光点，并可以使窗口发抖。你是不是喜好这类 “wow” 形式呢？(或许这功用并没有什么用，但倒是充足吸人眼球)

图片形貌

时程调试(TIME-TRAVEL DEBUGGING)

当调试运用时可以举行时刻游览会是如何一种体验？运转运用的过程当中，随便倒退或行进频频以找到 bug 发作的确实位置，修复 bug 后重放以确认是不是修复。

Redux 让开辟者梦想成真。Redux 开辟者东西可以使开辟者经由过程拖拽滑动条来支配运用的进度，就像 Youtube 视频平常。

它是如何事变的？ 还记得 Redux 强制实行的三条严厉划定规矩吗？ 这是它的窍门地点。

图片形貌

自动毛病报告

设想一下:一个用户在你的运用程序中发明了一些毛病，想要报告这个 bug。她挖空心思地回想和形貌她所做的事变。然后，开辟人员尝试手动实行这些步骤，以检察是不是再次发作毛病。毛病报告多是隐约的或不正确的。开辟人员很难找到 bug 地点的位置。

如今，这个如何。 用户单击“报告毛病”按钮。 体系自动将她所做的事变发送给开辟人员。 开辟人员单击“重播毛病”按钮并视察毛病是如何发作的。 bug 被就地压扁，每一个人都很高兴！

Redux Bug Reporter 就是如许玩的。它的事变道理呢？Redux 的限定前提让统统变成可以。

Redux 的瑕玷

Redux 实行的三个重要划定规矩是一把双刃剑。它们支撑壮大的功用，但同时也带来不可避免的瑕玷。

峻峭的进修曲线

Redux　的进修曲线比较峻峭。 明白，影象并习气其形式须要时刻。 假如你完整不会 Redux 和 React ，不引荐你二者同时进修。

　“榜样” 代码

在许多情况下，运用Redux意味着编写更多代码。平常须要打仗多个文件才能使一个简朴的功用平常事变。人们一向在埋怨他们必需用 Redux 编写的榜样代码。

我晓得，这听起来很抵牾。 我不是说 Redux 可以用起码的代码完胜利用吗？ 这有点像运用洗碗机。 起首，你得花时刻细致地分列盘子。 在此之前，你将看到洗碗机的优点：节约现实洁净餐具的时刻，消毒餐具等。你必需决议预备时刻是不是值得！

机能消耗

因为其强制实行的限定，Redux 也可以对机能产生影响。 每当数据发作变化时，它会增添一点开支。 在大多数情况下，这不是什么大题目，而且放缓并不显著。 依然，当存储中存在多量数据而且当数据频仍转变时（比方，当用户在挪动装备上疾速键入时），UI 可以因而变得迟缓。

Redux 不只是为 React 而生

一个罕见的误会是 Redux 仅用于 React。 听起来Redux在没有React的情况下没法做任何事变。 事实上，正如我们之前所议论的，Redux在几个重要方面补充了React。 React 是最最罕见的 Redux 用例。

然则，事实上，Redux可以运用任何前端框架，如Angular、Ember.js 以至jQuery 或许 一般的JavaScript。试着谷歌一下，你会发明这个，这个，这个以至这个。Redux 的平常头脑适用于任何处所

只需你明智地运用 Redux，你可以在许多情况下获得它的优点，而不仅仅是在React运用中。

总结

有不可避免的瑕玷。一个开辟团队的职责就是举行评价，看如何举行弃取并作出明智的挑选。

作为设想师，假如我们相识Redux的上风和劣势，我们将可以从设想的角度为这一决议计划做出孝敬。 比方，我们是不是可以设想用户界面以减轻潜伏的机能影响？ 或许我们可以首倡包括取消/重做功用来删除多量的确认对话框？ ？或许我们可以首倡 optimistic UI ，因为它可以以相对较低的价值来提拔用户体验。

你的点赞是我延续分享好东西的动力，迎接点赞！

交换

干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注民众号，背景复兴福利，即可看到福利，你懂的。