摘要：在方法中处理数据有三不同的角色派发器储存视图层我们的组件的主要思想是有一个单一源储存他们只能通过触发更新。这些操作负责调用派发器可以订阅更改并相应地更新自己的数据。与不同不使用派发器而是使用纯函数来定义数据变异函数。
本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3812
原文：https://www.fullstackreact.com/30-days-of-react/day-18/
处理客户端应用中的数据是一项复杂的任务。今天我们正在研究一种处理Facebook提出的复杂数据的方法，称为 Flux 体系结构。
随着应用变得越来越复杂, 我们需要更好的数据处理方法。有了更多的数据, 我们将有更多的记录。
我们的代码需要使用新功能处理更多的数据和应用状态。从异步服务器响应到本地生成的、不同步的数据, 我们不仅要跟踪这些数据, 还要将其与视图保持正常的联系。
认识到对数据管理的需求, facebook 团队发布了一种处理数据的模式, 称为 Flux。
今天, 我们将看一下Flux体系结构, 它是什么以及它存在的原因。
什么是fluxFlux是一种用于管理数据如何通过React应用流动的模式。正如我们所看到的, 使用React组件的首选方法是通过从一个父组件向它的子组件传递数据。Flux模式使此模型成为处理数据的默认方法。
在Flux方法中处理数据有三不同的角色:
Dispatcher 派发器
Stores 储存
Views (our components) 视图层(我们的组件)
Flux的主要思想是, 有一个单一源 (Stores 储存), 他们只能通过触发 actions 更新。这些操作负责调用派发器, Stores可以 订阅 更改并相应地更新自己的数据。
When a dispatch has been triggered, and the store updates, it will emit a change event which the views can rerender accordingly.当发送已触发, 并且存储更新时, 它将发出一个更改事件, 视图可以据此 重新渲染。
这似乎没必要这么复杂, 但结构使它难以置信地容易推理, 我们的数据来自哪里, 导致它的变化, 如何改变, 让我们跟踪特定的用户流, 等等。
Flux 背后的关键理念是:
数据流向一个方向, 并完全保存在Stores中。
实现虽然我们可以创建我们自己的flux实现, 许多已经创建了一些梦幻般的库, 我们可以挑选。
Facebook"s flux
alt
nuclear-js
Fluxible
reflux
Fluxxor
flux-react
更多... 许多许多许多
插件我们深入讨论这个材料关于Flux, 使用库, 甚至实现我们自己的版本的Flux, 最适合我们。
查看 fullstackreact.com
它可能是相当激烈的尝试为我们的应用选择 正确 选项。每个人因为不同的原因都有自己的特点, 是伟大的。然而, 在很大程度上, React社区已经集中在使用另一种称为Redux的flux工具。
ReduxRedux是一个小的库, 它的设计灵感来自flux模式, 但本身不是一个纯粹的flux实现。它提供了相同的一般原则, 围绕如何更新我们的应用中的数据, 但以略微不同的方式。
与Flux不同, Redux不使用派发器, 而是使用纯函数来定义数据变异函数。它仍然使用Store（储存）和Action（动作）, 可以直接地被栓到React组件。
3 主要原则的Redux我们将牢记在我们的应用中实现Redux是:
使用纯函数进行更新 (in reducers 在归约器中)
state 是只读属性
state是唯一的来源 (一个Redux的应用只有一个Stores 储存 )
Redux和Flux的一个大的区别是中间件的概念。Redux增加了中间件的想法, 我们可以使用它来操作我们接收到的操作, 无论是进入还是从我们的应用中。几天后我们再详细讨论。
在任何情况下, 这是很多介绍的flux模式。明天, 我们将实际开始移动我们的数据使用Redux。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84724.html
摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。为了获得更多的性能和简单性，同样允许我们使用正常的函数创建纯粹的，无状态的组件。在中，功能组件被称为一个参数的类似于构造函数类，它们是它所调用的，以及组件树的当前。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3819原文：https://www.fullstackrea...
摘要：归约器函数负责返回应用当前全局状态的表示形式。当我们在存储上发送操作时将使用应用的当前状态和导致状态更新的操作来调用此归约器函数。回到我们的归约器我们可以检查的动作类型并采取适当的步骤创建下一个状态。我们将处理动作创造者中归约器的副作用。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3811原文：https://www.ful...
摘要：我们将讨论三种不同的软件测试范例单元测试功能测试和集成测试。在中单元测试通常不需要浏览器可以快速运行不需要写入断言本身通常是简单而简洁的。集成测试最后我们将研究的最后一种测试是集成测试。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3809原文：https://www.fullstackreact.com/30-days-of...
摘要：使用承诺对象使我们有机会将异步操作的最终成功或失败关联到功能无论出于何种原因。例如在上面的示例中函数解析为值在成功完成时并在返回值这是另一个承诺上调用函数依此类推等等。这意味着我们只能返回一个承诺一次。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3814原文：https://www.fullstackreact.com/30...
阅读 567·2021-11-18 13:12
阅读 1266·2021-11-15 11:39
阅读 2444·2021-09-23 11:22
阅读 6084·2021-09-22 15:15
阅读 3619·2021-09-02 09:54
阅读 2280·2019-08-30 11:10
阅读 3204·2019-08-29 14:13
阅读 2888·2019-08-29 12:49
