30天入坑React ---------------day18 Intro To Flux
这篇文章是30天React系列的一部分 。
在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！
Flux简介
处理客户端应用程序内的数据是一项复杂的任务。今天我们正在研究一种处理Facebook提出的称为Flux Architecture的复杂数据的方法。
随着我们的应用程序变得越来越大，越来越复杂，我们需要一种更好的数据处理方法。随着更多数据，我们将有更多的跟踪。
我们的代码需要使用新功能处理更多数据和应用程序状态。从异步服务器响应到本地生成的，不同步的数据，我们不仅要跟踪这些数据，还要以理智的方式将其与视图联系起来。
认识到这种数据管理需求，Facebook团队发布了一种处理Flux数据的模式。
今天，我们将看看Flux架构，它是什么以及它存在的原因。
什么是Flux
Flux是一种用于管理数据如何通过React应用程序流动的模式。正如我们所看到的，使用React组件的首选方法是将数据从一个父组件传递给它的子组件。Flux模式使该模型成为处理数据的默认方法。
Flux方法中在处理数据有三个不同的角色：
- Dispatcher 调度员
- Stores 商店
- Views (our components) 视图（我们的组件）
Flux背后的主要思想是存在单一事实来源（the stores），它们只能通过触发操作来更新。这些操作负责调用调度程序，stores(商店)可以subscribe(订阅)更改并相应地update(更新)自己的数据。
当触发dispatch (调度)并且store updates(存储更新)时，它将发出更改事件，视图可以相应地重新呈现。
这可能看起来不必要地复杂，但结构使我们可以非常容易地推断出我们的数据来自哪里，是什么导致它的变化，它是如何变化的，并让我们跟踪特定的用户流等。
Flux背后的关键理念是：
数据在一个方向上流动并完全保存在store商店中。
实现
虽然我们可以创建自己的flux实现，但许多人已经创建了一些我们可以选择的some fantastic libraries(奇妙库)。
- Facebook's flux
- alt
- nuclear-js
- Fluxible
- reflux
- Fluxxor
- flux-react
- 还有更多......还有更多
插件为fullstackreact
我们深入讨论了这个关于Flux的资料，使用了库，甚至实现了我们自己最适合我们的Flux版本。请在fullstackreact.com上查看
尝试为我们的应用程序选择正确的选择可能非常激烈。每个都有自己的功能，并且由于不同的原因很好。但是，在很大程度上，React社区一直专注于使用另一个名为Redux的Flux工具。
Redux(终极版)
Redux是一个小型库，它的设计灵感来自Flux模式，但它本身并不是纯粹的Flux实现。它提供了与如何更新应用程序中的数据相同的一般原则，但方式略有不同。
与Flux不同，Redux不使用调度程序，而是使用纯函数来定义数据mutating(变异)函数。它仍然使用存储和操作，它们可以直接绑定到React组件。
在我们的应用程序中实现Redux时，我们将牢记Redux 的3个主要原则：
- 更新是使用pure functions 纯函数（在reducers中）
state是一个只读属性state是唯一的事实来源（storeRedux应用程序中只有一个）
与Redux和Flux的一个重大区别是middleware(中间件)的概念。Redux添加了中间件的概念，我们可以使用它来操作我们收到它们时的操作，这些操作都是从我们的应用程序进入和退出。我们将在几天内进一步详细讨论它们。
无论如何，这是对Flux模式的许多介绍。明天我们将真正开始移动我们的数据以使用Redux。
学习REACT正确的方法
React和朋友的最新，深入，完整的指南。
下一章：
使用Redux进行数据管理
本教程系列的完整源代码可以在GitHub repo上找到，其中包括所有样式和代码示例。
如果您在任何时候感到困难，还有其他问题，请随时通过以下方式与我们联系：
- 在文章末尾评论这篇文章
- 通过[email protected]发送电子邮件给我们
- 加入我们的gitter室
- 发送电子邮件至@fullstackreact