作为前端开发者，我们经常会遇到需要管理应用的状态管理问题。传统的 MVC 架构中，状态是分散的，“传统的”是指当今前端领域使用较多的架构，这个概念可能需要更新。 为了解决这个问题，Facebook 出了一个解决方案：Flux。但是，Flux 在使用过程中也暴露出了许多问题。为了进一步完善这个方案，Redux 应运而生，Redux 解决了 Flux 存在的种种问题。
Redux 是什么
Redux 是一个 JavaScript 应用程序状态管理库，它提供了更好的状态管理功能、更加可预测和易于调试的应用程序。Redux 适用于任何 JavaScript 应用程序，但特别适用于具有复杂状态、交互和应用数据流的应用程序。
Redux 能够更好的进行状态管理的原因是，Redux 引入了不可变数据概念，保证了状态的纯净性，同时提供了更好的 Action 和 Reducer 去更新状态，同时与 React 结合使用时表现尤佳。
Redux 是如何工作的
Redux 管理状态的方式非常简单，唯一需要跟踪的是应用程序的唯一数据源（单一状态树）。状态树是不可更改的，唯一的更改方式是通过 Action 。
当前状态和 Action 会被传递给 Reducer，在那里记录状态更改，并根据新的状态返回一个新状态树。这为整个应用程序提供了单一数据源。Redux 的使用意味着您能够追踪应用程序中的所有状态变化，并使应用程序更易于理解和调试。
下面是 Redux 工作流的图示：
步骤：
- UI 发起一个 Action
- Action 传递给 Reducer
- Reducer 更新 Store 的状态
- Store 触发 View 的重渲染，以显示更新
Redux 和 Flux 的比较
在理解 Redux 如何改进 Flux 的同时，也需要了解 Flux。Flux 是 Facebook 出品的一种解决前端应用架构问题的思路。在 Flux 中，应用程序状态被存储在 Store 中，UI 发起一个 Action 并将它传递给 Dispatcher，Dispatcher 会将 Action 分派到相关的 Store 中，Store 会存储新的状态，所有 Store 中的状态都会更新后，View 将重新渲染，更新状态。
在 Flux 中，Dispatcher 起到了数据分发的作用，然而每次分发完数据后，所有的 Store 都需要处理收到的新数据，这将导致数据同步问题和混乱的状态变化，不利于应用程序维护。
相比之下，Redux 的状态更新流程更加清晰简单、易于维护。Redux 去除了 Dispatcher，状态的更新流程如下：
- UI 发起一个 Action
- Action 包含必须的信息，比如行为名称和携带的数据
- Reducer 将收到的 Action 处理完之后返回新的状态树
这种架构下，Redux 独立于 React 之外，具有更高的解耦性、可扩展性和可复用性。
浅谈 Redux 的使用
Redux 的使用被公认为难以学习和使用。在学习 Redux 的过程中，有一些问题需要牢记：
一定要先掌握 Store、Action、Reducer、State 的概念，这是使用 Redux 的重要基础。
在编写 Reducer 时要极度小心，只有了解正确状态管理和数据流后，才能避免错误或副作用，进而提高代码的可维护性。
在官方文档下阅读源码可以帮助你理解 Redux 的工作原理：Redux 源码解析。
值得一提的是，Redux 可扩展性高，也可以方便地与其他中间件库结合使用以满足特定的业务需求。
这里是一个 Redux 实战示例，使用 redux-thunk 库处理异步请求：
------ - ---------------- ----------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
----------- ------
------ ---
--
------ ----- ----------- - -
-------------------- ----------------------
-------------------- ----------------------
--
-- -------
------ ----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------------------
------ - --------- ----------- ---- --
---- --------------------------------
------ - --------- ----------- ------ ------ -------------- --
--------
------ ------
-
--
-- ------ -------
------ ----- ---------- - -- -- ----- ---------- -- -
---------- ----- ------------------------------- ---
--- -
----- -------- - ----- --------------------------------------
----- ----- - ----- ----------------
---------- ----- -------------------------------- -------- ----- ---
- ----- ------- -
-------------------
-
--
-- -----
------ -------- ---------------------------- - ------------- -
------ ------------
--------
-------------
---------------------------------
--
-这个示例演示了如何使用 Redux 将异步请求集成到应用程序中。fetchUsers 函数初始化异步请求，它返回一个使用 redux-thunk 在 Store 中分发的 Action。在 Reducer 中处理 Action 并更新状态来完成应用程序的数据更新。
结论
Redux 能够更好的进行状态管理，它简化了状态的更新，通过统一数据源，减少了状态之间传递的复杂度，使应用程序更加稳定和可靠。从 Flux 到 Redux 的升级，大幅提高了 Redux 的可复用性、拓展性、可维护性和性能表现。
没错，学习 Redux 需要投入时间和精力，但学习 Redux 的投入必将因它的应用而有所回报。把 Redux 用好，是进行前端开发时无法避免的一道工作题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670740a0d91dce0dc8662797