在纯前端应用开发中，如何处理数据的变化并正确地管理应用状态是一个很大的问题。这时就需要用到 Redux 这个状态管理库。
Redux 是 Flux 架构思想的一种实现，它将应用中的状态保存在一个全局的 Store 中，并且只能通过 Dispatch 进行修改。通过这样做，我们可以更好地管理应用中的状态变化，并且避免出现不可控的变化。
开始使用 Redux
首先，我们需要下载和安装 Redux：
npm install redux --save
接下来，在代码中引入 Redux：
import { createStore } from 'redux';然后，我们需要定义一个 Reducer 来控制应用状态的变化。Reducer 是一个纯函数，它接收一个旧的状态和一个 Action，然后返回新的状态：
-- -------------------- ---- -------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - -
--
---- ------------
------ -
------ ----------- - -
--
--------
------ ------
-
-上面的代码中，我们定义了一个初始状态 initialState，并且定义了一个 Reducer 来控制状态的变化。这个 Reducer 接受两个参数，一个是旧的状态，一个是 Action，然后根据 Action 的类型来返回新的状态。
接下来，我们需要创建一个 Store 来保存应用的状态：
const store = createStore(reducer);
现在，我们已经创建好了一个 Store，这个 Store 里面保存着我们应用的状态。
在组件中使用 Redux
在使用 Redux 的时候，我们可以通过 Provider 来将 Store 注入到应用中的所有组件中。在任何地方都可以通过 Connect 来获取这个 Store 中的状态。
下面是一个简单的组件例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
--------------------
------- ------------------------------------
------- ------------------------------------
------
--
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
-
------ ------- ------------------------ -----------------------------在上面的代码中，我们通过 connect 将 Counter 组件和 Redux 中的 State 和 Dispatch 结合在了一起。使用 mapStateToProps 函数来将 State 中的 count 属性映射到组件的 props 中，使用 mapDispatchToProps 函数来将 Dispatch 映射到组件的 props 中。
总结
Redux 是一个非常优秀的状态管理库，在纯前端应用开发中应用广泛。本文介绍了 Redux 的基本用法，包括如何创建 Store，定义 Reducer 和在组件中使用 Redux。
希望这篇文章可以帮助你更好地理解和使用 Redux，并且在开发中得到运用。完整示例代码请见下方：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - --------- ------- - ---- --------------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - -
--
---- ------------
------ -
------ ----------- - -
--
--------
------ ------
-
-
----- ----- - ---------------------
-------- ----- -
------ -
--------- --------------
-------- --
-----------
--
-
-------- -------------- -
------ -
-----
--------------------
------- ------------------------------------
------- ------------------------------------
------
--
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
-
----- ---------------- - ------------------------ -----------------------------
-------------------- --- ---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab1c8a48841e989470698b