什么是 Flux 应用架构
Flux 是一种前端应用架构模式，由 Facebook 推广，主要应用于 React 的开发中，通过数据的单向流动和严格的约束，可以让应用逻辑更加清晰、可维护性更高。
Flux 模式的核心思想是将应用状态抽象成一个中央存储器（Store），并将应用中的数据流向规定为单向的，采用『Action -> Dispatcher -> Store -> View』 的数据流方向，其中：
- Action：描述应用内部发生的事件，可以理解为应用内部的消息；
- Dispatcher：作为中间人，负责将 Action 分发给 Store 处理；
- Store：存储应用内部的状态，响应 Dispatcher 分发的 Action 并更新自己的状态；
- View：显示当前状态的组件。
Flux 的核心理念是通过严格的数据流控制，避免任意组件修改 Store，保证应用的状态可预测性，可维护性和可扩展性。
在 TypeScript 中使用 Flux
在 TypeScript 中使用 Flux 也有一些额外的需求，但不用担心，Flux 本身并不包含 any 类型，通过使用 TypeScript，我们可以发挥其强类型的优势，增加代码的可读性和稳定性。
以下是使用 TypeScript 实现 Flux 的核心代码片段（基于 Redux）：
-- ------ ----
---- ---------- - - ----- ------ ----- ------ - - - ----- --------- --- ------ --
-- ------ ----
-------- ------------- -------- ---------- -
------ - ----- ------ ---- --
-
-------- -------------- -------- ---------- -
------ - ----- --------- -- --
-
-- ------- --
-------- ------------ ------------- - --- ------- ------------ ------------- -
------ ------------- -
---- ------
------ ---------- -------------
---- ---------
------ ---------------- -- -- - --- -----------
--------
------ ------
-
-
-- -----
---- ---------- - -
------ --------------
--
----- ----- - ----------------------------- ----- ----
-- ----
-------- ----- ----- -- -
----- ------ -------- - -------------
------ -
-----
------ ------------ ------------- -- ------------------------ --
------- ----------- -- -------------------------------------------
----
----------------- -- -- -
--- --------
------
------- ----------- -- ----------------------------------------------
-----
---
-----
------
--
-
-------- -------- -
-------------------- ------------------------------ --- ---------------------------------
-
------------------------
---------总结
在 TypeScript 中使用 Flux，我们需要了解 Action、Store、Dispatcher 和 View 四个核心组成部分以及它们之间的关系。通过定义 Action，我们可以实现对应用内数据发送消息的功能；定义 Store，我们可以将应用内部状态抽象为一个中央数据存储器并对各种 Action 做出对应的响应；定义 View 应用界面，它通过 Store 获取应用的状态。在使用这些元素搭建应用的过程中，我们需要特别注意数据流的单向性和严格限制修改 Store 的限制性原则。
在实现了 Flux 模式后，通过使用 TypeScript 的静态类型检查功能，我们可以有效地避免一些低级的错误，增强代码的可读性和稳定性，这对于大型的应用程序，可以避免后期的维护负担。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6494273648841e98941ace9a