在前端开发中，管理应用程序状态是一个非常关键的问题。随着应用程序规模的增长，你将逐渐发现，难以维护、修改和测试应用程序状态变得越来越困难。Redux 和 Flux 都是解决这个问题的库，它们通过数据流的方式去管理应用程序的状态，并且能够使其可预测、易于扩展和测试。那么 Redux 和 Flux 有什么区别呢？在本文中，我们将从框架的角度来了解它们的区别，帮助你更好地理解和选择这两种库。
关于 Flux
Flux 是一个由 Facebook 提出的一种状态管理模式。在 Flux 中，数据流是单向的，它由三部分组成：Dispatcher（调度器）、Store（数据存储器）、View（视图）。Dispatcher 是数据流的控制中心，它负责将数据发送到 Store 中。Store 存储所有的应用程序状态，当 Dispatcher 把数据发送到 Store 时，Store 将保存新的数据并向 View 发送事件，以通知 View 更新自身。View 是应用程序中的表示层，它通常是用 React 来实现的。
在 Flux 中，一个应用程序可能有多个 Store，每个 Store 负责维护应用程序的一个特定部分的状态。一个 Store 可以由多个 View 注册，当 Store 中的状态改变时，它会向注册的 View 发送事件，以通知它们更新自身。一个 Store 可以接收多个 Action，但是它只能有一种响应 Action 的方式。这使得在应用程序中管理状态变得更加可预测和简单。
下面是 Flux 的代码示例：
-- -------------------- ---- -------
-- --------
------ - ------------ - ---- ---------
------ ---------- ---- ---------------
----- ----- - -
-- ----
------ ---
-- ----
------------------ -
---------- - - -------------- ----------- --
--------------------
--
-- ----
---------- -
------ -----------
--
-- ------
--------------------- -
-------------------------- ----------
--
-- --------
------------------------ -
----------------------------- ----------
--
-- --------
-------------------- -
-- --------------
------------------- -
---- -----------
--------------- ----- -------------- ---
------
---- ----------
--------------- ---- -------------- ---
------
--------
------
-
-
-
-- -------
----------------------------------------------------
------ ------- ------关于 Redux
Redux 是一个由 Dan Abramov 提出的状态管理库，它是基于 Flux 思想而设计的。与 Flux 类似，Redux 也是通过数据流的方式去管理应用程序的状态，但它只有一个 Store，将所有的状态存储在一个 state 对象中。当一个 Action 被触发时，它将被传递到 Reducer 中进行处理，在 Reducer 中，根据 Action 的类型对应处理应用程序的状态，并将新的状态返回给 Store，更新 Store 中的 state 对象。当 state 发生变化时，Store 会通知 View 更新自身。
与 Flux 不同的是，Redux 只有一个 Store，这意味着在 Redux 中，维护应用程序状态的逻辑更加简单和可预测。此外，在 Redux 中，Action 是一个普通的 JavaScript 对象，它不仅仅承载着应用程序状态的更新，还可能携带其他的数据和信息，使得我们可以在 Reducer 中处理更加丰富和复杂的逻辑。
下面是 Redux 的代码示例：
-- -------------------- ---- -------
-- ----------
----- ------- - ------- ------- -- -
------------------- -
---- -----------
------ - --------- ----- -------------- --
---- ----------
------ - --------- ---- -------------- --
--------
------ ------
-
-
------ ------- --------// Store.js
import { createStore } from 'redux';
import reducer from './Reducer';
const store = createStore(reducer, {});
export default store;Redux 与 Flux 的区别
可以看出，Redux 与 Flux 有很多相似之处，但它们之间也有着一些区别。下面是一些关键的区别：
1. 单一 Store 与多 Store
Flux 中可以有多个 Store，每个 Store 都对应一个特定的部分状态。而在 Redux 中，只有一个 Store，将所有的状态保存在一个 state 对象中。这使得在 Redux 中维护应用程序状态更加简单和可预测。
2. Action 的变化
在 Flux 中，Action 是一个简单的 JavaScript 对象，只包含一个类型和一个可选的负载。而在 Redux 中，Action 同样是一个 JavaScript 对象，但它可以包含任何类型的数据，因此在 Reducer 中可以处理更加丰富和复杂的逻辑。
3. 纯函数与回调函数
Flux Store 中处理 Action 的方式通常是将回调函数作为参数传入 Store，当 Store 接收到 Action 时立即调用回调函数进行处理。而在 Redux 中，Reducer 必须是一个纯函数，它接收当前状态和 Action 作为参数，并根据 Action 的类型返回新的状态。这意味着在 Redux 中，状态更新的方式更加清晰和可预测，更容易进行测试和调试。
结论
Redux 和 Flux 都是优秀的状态管理库，它们都在不同程度上抽象了应用程序状态的管理和处理，使得我们在应用程序中管理状态更加简单和可预测。通过理解它们之间的区别，我们可以更好地选择适合我们应用程序的库。
在选择 Redux 和 Flux 时，我们应该根据应用程序规模和需求来选择，如果我们的应用程序状态比较简单且规模不大，我们可以选择使用 Flux；如果状态比较复杂或者规模较大，我们可以选择使用 Redux。无论我们选择哪种库，我们都应该遵循它们的原则，将应用程序状态的管理和处理抽象出来，使其更加清晰和可预测。
希望这篇文章能够帮助你了解 Redux 和 Flux 的区别，从框架的角度去理解它们的本质，并为你的开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fd12dd4471362601777efd