在 React 开发中，使用 Flux 架构能够更好地管理应用程序的状态和数据流。Flux 是一种数据管理和应用架构，用于构建可扩展的 Web 应用程序。它被用于构建 Facebook 的前端组件库和 Instagram.com 等应用程序。
下面将介绍使用 Flux 架构的步骤和示例代码，帮助您更好地理解如何在 React 中使用 Flux 架构。
Flux 架构的组成部分
Flux 由以下几个部分组成：
- Dispatcher：将所有的数据传递到 Store。
- Store：负责管理应用程序的所有状态和数据。Store 一定是不可变的，意味着在它们被创建后，不会再被修改。
- Actions：被视为 Store 更新的翻译器，更新 Store 前的所有逻辑代码都在这里处理。
- View：负责数据的渲染和展示。
下面将介绍每个部分的详细信息。
Dispatcher
每次用户和应用程序交互时，Dispatcher 负责传递给 Store 对应的 Action。在 Flux 架构中，Dispatcher 负责将所有数据传递到 Store，并且不存在多个 Dispatcher 的情况。
每个 Store 都会在 Dispatcher 上注册一个回调函数，以便对来自 Dispatcher 的所有 Actions 进行处理。Dispatcher 管理着 Store 对应的所有 Action 的信息，并且按照它们被注册的顺序，依次将 Action 分发给每一个 Store。
Store
Store 负责管理应用程序的所有状态和数据，以此来控制应用程序。Store 保存所有应用程序的数据，在应用程序中起着非常重要的作用。
Store 是不可变的，意味着它们被创建后，就不能再进行修改。它们只能通过 Dispatchers 接收到的 Actions 来进行更新。在 Store 中，我们将设计整个应用程序的数据流，并保证它的一致性和正确性。
Actions
Actions 是 Store 更新的翻译器，它将所有对 Store 的更改转化为可被 Store 理解的对象，以此来更新 Store 中的数据。Actions 是将 View 中的用户交互转化为请求 Store 更新的重要部分。
View
View 负责数据的渲染和展示。View 中的数据应该来自 Store，这是将它作为一种 React 组件的原则。
当相关数据发生变化时，Store 会通过 Dispatcher 分发一个通知到 View，View 会根据新的数据重新渲染。
Flux 在 React 中的示例代码
从上面的部分可以知道，Flux 架构包括四个部分，即 Dispatcher、Store、Actions 和 View。下面是一个使用 Flux 架构的 React 组件示例代码，让我们一起来看看。
actions.js
-- -------------------- ---- -------
------ ---------- ---- ---------------
------ ----- -------- - -----------
------ -------- ---------------- -
---------------------
----- ---------
----- ----
---
-上面的代码是一个 Action 的文件。当我们添加一个新的任务时，我们将发布一个名为 ADD_TODO 的事件。在这里我们将传递一个任务对象。
store.js
-- -------------------- ---- -------
------ - ------------ - ---- ---------
------ ---------- ---- ---------------
------ - -------- - ---- ------------
--- -------- - ---
----- --------- ------- ------------ -
------------- -
--------
----------------------- -- -
------ -------- -
---- ---------
----------------------
--------------------
------
--------
------
-
---
-
------------- -
------ ---------
-
-
------ ------- --- ------------代码中，首先在 store.js 中定义了taskList数组，接着在 Store 中我们创建了一个 TodoStore 类，在构造函数中，注册了完成任务所需的回调。回调函数中有一个 switch 分支来捕获分发器中分类别处理的所有 Action。
创建了 TodoStore 设计方案后，我们需要为它提供一个公共接口。在上面的示例中，我们添加了 getAllTasks 方法，以便 View 能够从 Store 获取最新数据。
view.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- ----------
------ - ---------- - ---- ------------
------ ------- ----- -------- ------- --------- -
------------------ -
-------------
---------- - -
-------- --
--
-
------------------- -
---------------------- -- -- -
------------------
---
-
------------ - --- -- -
-------------------
-------------------------------
----------------------- -----
-
------------ - --- -- -
----------------------- -----------------
-
-------- -
----- ----- - ---------------------------------- ------ -- -
--- -----------------------
---
------ -
-----
----- -----------------------------
------
-----------
--------------------------
----------------------------
----------------- ----- -- -- --------
------- ------------------------
-------
----------------
------
--
-
-在上述示例代码中，我们使用 React 获取要添加到 Store 中的新任务。当我们添加一个新任务时，会将任务传递给 Actions 模块。以上代码将渲染一个表单，以便输入新任务。当任务添加时，View 会获得更新后的 Store 信息并重新渲染。
总结
使用 Flux 架构来组织 React 应用程序，能够更好地管理应用程序的状态和数据流。Flux 不仅可以工作在 React 中，也能够在大多数 Web 应用程序中使用。
上文已经介绍了 Flux 架构的组成部分，并提供了一个使用 Flux 架构的 React 组件示例代码。这些代码可以帮助你更好地了解如何在 React 中使用 Flux 架构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647efa0f48841e9894ea9d0b