【全栈React】第18天: Flux 简介

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3812
原文：https://www.fullstackreact.com/30-days-of-react/day-18/

处理客户端应用中的数据是一项复杂的任务。今天我们正在研究一种处理Facebook提出的复杂数据的方法，称为 Flux 体系结构。

随着应用变得越来越复杂, 我们需要更好的数据处理方法。有了更多的数据, 我们将有更多的记录。

我们的代码需要使用新功能处理更多的数据和应用状态。从异步服务器响应到本地生成的、不同步的数据, 我们不仅要跟踪这些数据, 还要将其与视图保持正常的联系。

认识到对数据管理的需求, facebook 团队发布了一种处理数据的模式, 称为 Flux。

今天, 我们将看一下Flux体系结构, 它是什么以及它存在的原因。

什么是flux

Flux是一种用于管理数据如何通过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工具。

Redux

Redux是一个小的库, 它的设计灵感来自flux模式, 但本身不是一个纯粹的flux实现。它提供了相同的一般原则, 围绕如何更新我们的应用中的数据, 但以略微不同的方式。

与Flux不同, Redux不使用派发器, 而是使用纯函数来定义数据变异函数。它仍然使用Store（储存）和Action（动作）, 可以直接地被栓到React组件。

3 主要原则的Redux我们将牢记在我们的应用中实现Redux是:

• 使用纯函数进行更新 (in reducers 在归约器中)

• state 是只读属性

• state是唯一的来源 (一个Redux的应用只有一个Stores 储存 )

Redux和Flux的一个大的区别是中间件的概念。Redux增加了中间件的想法, 我们可以使用它来操作我们接收到的操作, 无论是进入还是从我们的应用中。几天后我们再详细讨论。

在任何情况下, 这是很多介绍的flux模式。明天, 我们将实际开始移动我们的数据使用Redux。