从设计的角度看Redux

你知道 Redux 真正的浸染远不止状态打点吗？ 你是否想要相识 Redux 的事变道理？ 让我们深入研究 Redux 可以做什么，它为什么做它的工作，它的弱点是什么，以及它与计划有哪些关联？

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

•  花哨的后端的对象
•  我传闻过它，但我不知道它是什么，这也许是一个 React 框架
•  是一种在 React 应用中存储打点状态的更好方法

这个题目，我问过 40 多位计划师，以上是他们的经典答复。他们中的很多人都知道 Redux 与React 一路事变，它的事变是状态打点。

本文的目标就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样计划？何时行使它？以及它与计划有哪些关联？

我的方针是辅佐像你们这样的计划师。纵然您早年没有写过一行代码，我以为领略 Redux如故是也许的、有益的和风趣的。

什么是 Redux

在超高程度上，Redux 是开拓职员用来简化他们事变的器材。你们许多人也许都传闻过，它的事变是状态打点。稍后我将表明状态打点的寄义， 而今，我只能想让你看下面这张图:

为什么要相识 Redux

Redux 更多的是关于应用措施的内部事变而不是它的外面和感觉。 这是一个有点伟大的器材，进修曲线相对陡峭，但这是否意味着我们作为计划师应该阔别它？

不。我以为我们应该拥抱它。汽车计划师应该相识引擎的用途，对吗?为了乐成地计划应用措施界面，计划师还应该对底层的对象有踏实的相识。我们应该相识它可以做什么，领略开拓职员为什么行使它，并相识它的上风和寄义。

Redux 可以做什么

开拓职员在 React 应用中行使 Redux 来打点状态。这最常见的用法，Redux 改造了React(尚未)做得欠好的方面。

然而，你很快就会发明 Redux 的真正成果远远不止于此，让我们从相识状态打点的真正寄义开始。

状态打点

假如你不确定这个状态意味着什么，让我们用一个更通用的术语来替代它:数据。状态是不绝变革的数据，状态抉择在用户界面上表现什么。

状态打点是什么意思? 一样平常来说，我们必要在应用措施中打点三个方面的数据

•  获取和存储数据
•  将数据绑定到 UI 元素
•  改变数据

好比我们要做一个 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 保持高度同一。

Redux 将数据齐集地存储起来,并将数据分派给 UI 元素

将数据绑定到 UI 元素

假如单单行使 React 的话，现实上有一种更好的要领来获取和存储数据。我们可以请我们很是善良的厨师Shotwell为他全部的厨师伴侣购物。他会开一辆卡车去农场，把货品运回。我们可以从容器组件中获取数据，譬喻 Dribbble 示例中的 Shot 组件，并将其用作单一的数据来历。

这种要领比从每个组件获取数据的简朴要领更有用。可是 Shotwell 是怎样将配料转达给其他厨师的呢? 怎样将数据转达给现实渲染 HTML 元素的组件? 我们将数据从外部组件转达到内部组件，就像接力棒一样，一向转达到数据达到目标地。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!