前端怎样做状态管理 —— 从 Flux 到 Redux
对于前端开发者而言，状态管理是非常重要且必需的一部分。关于状态管理的方法，Flux 和 Redux 一直被广泛应用。本文将会从 Flux 和 Redux 的概念、核心思想、以及实现方式等方面进行详细的解析，并且附带代码示例进行讲解，旨在帮助读者更好地理解和掌握前端状态管理的技术。
1. Flux
1.1 概念
Flux 是 Facebook 推出的一种前端状态管理架构，旨在解决 React 组件之间数据状态管理的问题。Flux 架构采用单向数据流，其中包括四部分的结构，分别是 Action、Dispatcher、Store 和 View。
Action：是视图层发出的消息（比如 mouseClick、keydown 等），是一个普通的 JavaScript 对象，通常包含一个 type 属性，表示消息的类型；
Dispatcher：接收 Actions，并将它们分发到所有的 Store 上，是一个全局的单例对象；
Store：用于存储应用的状态，会在 Dispatcher 上注册回调函数，当 Dispatcher 分发 Action 后，每个 Store 触发并处理 Action 的回调函数；
View：React 组件的职责，从 Store 中获取状态传递给子组件，同时可以发出 Action。
1.2 核心思想
Flux 的核心思想有以下三点：
单向数据流：Flux 的数据流是单向的，方便了数据的跟踪和管理；
可预测性：Dispatcher 会一遍又一遍地执行 Action，每个 Store 都有机会对 Action 进行处理，无论何时、何种原因，Store 都具有相同的表现和响应；
纯函数：在 Flux 中，Store 更新数据必须是纯函数，即传入相同的参数，永远会返回相同的输出结果。
1.3 实现方式
以下是一个简单的 Flux 实现方式：
-- -------------------- ---- -------
-- ----------
----- ------- - -
--------- -----------
------------ -------------
--
-- ------ -------
-------- ------- ------ -
------ -
----- -----------------
-------- ----
--
-
-------- ---------- ---- -
------ -
----- --------------------
-------- --
--
-
-- -----------
----- ---------- -
------------- -
-------------- - ---
-
------------------ -
------------------------------
------ -- -- -
----- ----- - ---------------------------------
---------------------------- ---
--
-
---------------- -
--------------------------------- -- -
-----------------
---
-
-
-- --------
----- ----- -
------------- -
---------- - ---
------------------ - -----
--------------- - -----------
------------------ - --------------------------------------------------
-
--------------- -
------ ------------- -
---- -----------------
--------------------------------
------
---- --------------------
------------------------- -- -
-- -------- --- --------------- -
--------- - -----------
-
---
------
--------
------
-
-
-
-- ------------- ---
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------------- -
---------- - --- --------
-------------------------------------- -- -
---------------
------ -----------
---
---
-
--------- -
----- ---- - - --- ----------- ------ --- ----- ----- --
----------------------------------------------
-
-------------- -
-----------------------------------------------
-
-------- -
------ -
-----
--------------
---------------------------- -- -
---- --------------
------
---------------
-------------------
------------ -- -------------------------
--
-------------------------
------
---
------- ----------- -- ----------------
--- ----
---------
------
--
-
-2. Redux
2.1 概念
Redux 是一种 JavaScript 状态管理容器，通常与 React 结合使用。Redux 也采用单向数据流，但相比 Flux，Redux 概念更加简单，只有三个概念，分别是 Action、Reducer 和 Store。
Action：Redux 中的 Action 和 Flux 中的类似，都是一个简单的 JavaScript 对象，其中 type 属性表示 Action 的类型，payload 表示要更新的数据；
Reducer：Redux 规定一个 Reducer 必须是一个纯函数，负责对 Action 进行处理和分发，返回一个新的状态；
Store：负责存储应用的状态，同时支持订阅和发布模式，当 Store 发生改变的时候会自动通知相关的订阅者更新。
2.2 核心思想
Redux 的核心思想有以下三点：
单一数据源：Redux 的状态是存储在一个单一的数据源中的，方便同步和调试，也可以记录操作的历史，便于回退操作；
状态不可变：Redux 中的状态不允许被直接改变，只能通过 Action 和 Reducer 进行数据的更改，这样做是为了保证数据的不可变性和安全性；
纯函数：在 Redux 中，Reducer 必须是纯函数，传入相同的参数，永远会返回相同的输出结果。
2.3 实现方式
以下是一个简单的 Redux 实现方式：
-- -------------------- ---- -------
-- ----------
----- ------- - -
--------- -----------
------------ -------------
--
-- ------ -------
-------- ------- ------ -
------ -
----- -----------------
-------- ----
--
-
-------- ---------- ---- -
------ -
----- --------------------
-------- --
--
-
-- ----------
-------- ------------- - - ------ -- -- ------- -
------ ------------- -
---- -----------------
------ ----------------- ------ -
------ ---------------- ---------------
---
---- --------------------
------ ----------------- ------ -
------ ---------------------- -- -
-- -------- --- --------------- -
------ ----------------- ----- -
----- ----------
---
-
------ -----
--
---
--------
------ ------
-
-
-- --------
----- ----- - ---------------------
-- ------- ------ ---
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -----------------
-
------------------- -
---------------- - ------------------ -- -
--------------------------------
---
-
---------------------- -
-------------------
-
--------- -
----- ---- - - --- ----------- ------ --- ----- ----- --
------------------------------
-
-------------- -
-------------------------------
-
-------- -
------ -
-----
--------------
---------------------------- -- -
---- --------------
------
---------------
-------------------
------------ -- -------------------------
--
-------------------------
------
---
------- ----------- -- ----------------
--- ----
---------
------
--
-
-3. 总结
无论是 Flux 还是 Redux，都有其各自的优点和局限性，选择合适的状态管理方案需要根据具体的业务需求和代码复杂度进行评估。对于轻量级应用，可以使用简单的状态管理工具，比如 React 自带的 useReducer，而对于复杂度高的应用，则需要采用符合实际需求的状态管理方案。希望本文能为读者提供一定的指导和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484466248841e989436537b