随着前端应用的复杂性不断提高，状态管理变得越来越必要，Redux 作为一个状态管理库也变得越来越流行。这篇文章将详细介绍 Redux 的基本概念和使用方法，并探讨其和 FLUX 的异同。
FLUX
FLUX 是由 Facebook 提出的一种状态管理架构。其核心思想是单向数据流，即 UI 触发 action，通过 Dispatcher 将 action 分发给 Store，Store 更新状态后再通知 UI 进行更新。
FLUX 的问题
虽然 FLUX 在前端状态管理上有着不错的表现，但也存在一些问题：
- Action 与 Store 的直接关系会导致难以维护或扩展应用；
- Store 与 UI 的绑定往往是双向的，即 Store 处理 UI 的事件，UI 也会读取 Store 的状态。
这些问题在应对较为复杂的前端应用时，会导致代码冗长，调试和维护困难。
Redux
Redux 是由 Dan Abramov 提出的一种状态管理库，其基于 FLUX 架构，改进了其问题，并强调单一数据源和不可变性（Immutability）。
单一数据源
Redux 的状态管理基于一个单一的 JavaScript 对象，称为 Store，其保存了所有需要管理的状态。UI 更新是通过从 Store 中读取状态并渲染。
由于所有的状态都统一在一个 Store 中，因此易于查看和调试应用。同时，这也保证了状态的相互独立，易于调用。
不可变性
Redux 值得特别注意的一点是其强调不可变性的特点。即不对已有的状态进行修改，而是每次都返回一个新的修改后的状态。这不仅避免了不必要的副作用，还很好地支持了时间旅行等功能。
Redux 的使用
Redux 通过创建 Store，定义 reducers 和 actions，以及使用 react-redux 实现与 React 的集成。
创建 Store
创建 Redux 应用最先要做的就是创建一个 Store。Store 接受并保存着应用的所有状态。
import { createStore } from 'redux';
/**
* 使用 Redux 创建 Store
*/
const store = createStore(rootReducer);定义 reducers 和 actions
Reducers 是用于修改 Store 状态的函数，它接受前一个状态和 action 作为输入，并返回新的状态。Actions 则是一个普通的对象，描述需要操作的行为类型和额外的数据。
-- -------------------- ---- -------
---
- ---- -------
--
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- ----------------
---- --------------
------ -------------- -- -
-- -------- --- --------------- -
-------------- - ----------------
-
------ -----
---
--------
------ ------
-
--
---
- -- -------
--
----- ------------- - ------- -- --
----- -----------
--------
---
----- ---------------- - ------- -- --
----- --------------
--------
---使用 react-redux
react-redux 是 Redux 的 React 绑定库，它提供了一些用于与 React 结合使用的工具。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ------- - ---- --------------
---
- -- ----- - ----- -----
--
----- --------------- - ----- -- --
------ ------------
---
---
- -- ----- ------- - ----- -----
--
----- ------------------ - -------- -- --
-------- ---- -- -
------------------------------
--
----------- -- -- -
-------------------------------
--
---
---
- -- ------- - ----- - ------- --- -----
--
----- --------- - -- ------ -------- ---------- -- -- -
-----
--------------- -- -
---- --------------
------
---------------
------------------------
----------- -- --------------------
--
------------------------
------
---
------- ----------- -- -------------------------------- - ---------- -------------
------
--
----- ------------------ - ------------------------ -------------------------------
---
- -- -------- -- -----
--
----- --- - -- -- -
--------- --------------
------------------- --
-----------
--Redux 的优点
Redux 具有很多优点，其中包括：
- 中心化管理，易于理解和维护；
- 方便有序的时间旅行；
- 优秀的性能表现，通过避免直接在 Store 中修改值，快速计算差异进行渲染；
- 单方向数据流，避免了 Store 和 UI 的相互耦合。
总结
Redux 作为一种状态管理库，可以极大地提高前端应用的可维护性和灵活性。在实际开发中，需要结合自己的场景进行使用，并体会其带来的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aa00548841e98948bce3d