从设计的角度看Redux
|
副标题[/!--empirenews.page--]
你知道 Redux 真正的作用远不止状态管理吗？ 你是否想要了解 Redux 的工作原理？ 让我们深入研究 Redux 可以做什么，它为什么做它的事情，它的缺点是什么，以及它与设计有哪些关联？ 你听说过 Redux 吗?它是什么? 请不要用 Google 搜索
这个问题，我问过 40 多位设计师，以上是他们的经典回答。他们中的许多人都知道 Redux 与React 一起工作，它的工作是状态管理。 本文的目的就是让你对 Redux 有更全面的认知: 它能做什么？为什么它要这样设计？何时使用它？以及它与设计有哪些关联？ 我的目标是帮助像你们这样的设计师。即使您以前没有写过一行代码，我认为理解 Redux仍然是可能的、有益的和有趣的。 什么是 Redux 在超高水平上，Redux 是开发人员用来简化他们工作的工具。你们很多人可能都听说过，它的工作是状态管理。稍后我将解释状态管理的含义， 此刻，我只能想让你看下面这张图:
为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。 这是一个有点复杂的工具，学习曲线相对陡峭，但这是否意味着我们作为设计师应该远离它？ 不。我认为我们应该拥抱它。汽车设计师应该了解引擎的用途，对吗?为了成功地设计应用程序界面，设计师还应该对底层的东西有扎实的了解。我们应该了解它可以做什么，理解开发人员为什么使用它，并了解它的优势和含义。 Redux 可以做什么 开发人员在 React 应用中使用 Redux 来管理状态。这最常见的用法，Redux 改进了React(尚未)做得不好的方面。 然而，你很快就会发现 Redux 的真正功能远远不止于此，让我们从了解状态管理的真正含义开始。 状态管理 如果你不确定这个状态意味着什么，让我们用一个更通用的术语来替换它:数据。状态是不断变化的数据，状态决定在用户界面上显示什么。 状态管理是什么意思? 一般来说，我们需要在应用程序中管理三个方面的数据
比如我们要做一个 Dribbble 的作品页面。在作业页面上我们想要展示的数据有哪些？其中包括作者的头像照片、名称、动态 GIF 图片、点赞数量、评论，以及等等。 首先，我们需要从云服务器获取所有这些数据并将其放在某个位置。接下来，我们需要实际显示数据。我们需要将这些数据分配给对应的 UI 元素，这些 UI 元素表示我们在浏览器中实际看到的内容。例如，我们将头像照片的 URL 分配给 img 标签的 src 属性:
最后，我们需要处理对数据的更改。例如，如果用户向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 元素的组件? 我们将数据从外部组件传递到内部组件，就像接力棒一样，一直传递到数据到达目的地。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
