Redux 是一种状态管理库，具有十分广泛的应用场景，特别适用于 React 框架的状态管理。本文将介绍 Redux 在 React 中的应用，并提供详细的学习指导和示例代码。
Redux 认识
Redux 基于 Flux 架构的思想，将组件之间的状态管理转移到了一个全局状态存储中心。Redux 将应用的状态存储在一个全局的 Store 中，通过对 Store 的修改实现对应用状态的管理。
在 Redux 中，状态是只读的，即只能够通过 dispatch(action) 对状态进行修改。通过 Action 创建器函数创建 Action 对象，Action 描述了对数据的操作类型。Reducer 函数接收 Action 对象并根据不同的 Action 类型进行相应的处理，最终将新的状态存储到单一的 Store 中。
Redux 具有如下的核心概念：
- Store：应用的状态存储中心；
- Action：描述状态的操作类型；
- Reducer：处理 Action 的 Reducer 函数；
- Dispatch：发送 Action 的方法；
- Selector：从 Store 中获取状态的方法。
在 React 应用中使用 Redux，需要执行如下步骤：
- 安装 Redux 库：
npm install --save redux - 安装 React-Redux 库：
npm install --save react-redux
创建 Store
在 React-Redux 库中，通过 createStore 函数创建一个 Store 对象，示例代码如下：
import { createStore } from 'redux';
const store = createStore(reducer);其中，参数 reducer 是一个 Reducer 函数，用于处理 Action，生成新的 State。
使用 Provider 组件
使用 React-Redux 库提供的 Provider 组件，可将 Store 对象注入到整个应用中。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--定义 Action 和 Reducer
定义 Action 用于描述对状态的操作类型，以及 Reducer 函数，用于处理 Action，生成新的 State。
-- -------------------- ---- -------
-- ----------
----- -------- - -----------
------ ----- ------------- - ------ -- -
------ -
----- ---------
----
-
--
-- ----------
----- ------------ - -
------ --
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------- ------------
--
--------
------ ------
-
--
------ ------- ------------连接 React 和 Redux
使用 connect 函数将 React 组件与 Redux 的 Store 进行连接，从而让 React 组件可以获取到 Store 中的状态。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------- - ---- ------------
----- -------- ------- --------------- -
-------- -
----- -
------
-------
- - -----------
------ -
-----
----
-------------- ------ -- -
--- --------------------
---
-----
------- ----------- -- ------------ ----------- -------------
------
--
-
-
----- --------------- - ------- --------- -- -
------ -
------ -----------
-
--
----- ------------------ - ---------- --------- -- -
------ -
-------- ------ -- -
------------------------------
-
-
--
------ ------- --------
----------------
------------------
------------在上述代码中，mapStateToProps 函数用于将 Store 中的状态映射到组件的 props 属性中；mapDispatchToProps 函数用于将 Action 创建器函数映射到组件的 props 属性中。
总结
Redux 是一种状态管理库，具有广泛的应用场景，特别适用于 React 框架的状态管理。在 React 应用中使用 Redux，需要执行创建 Store 对象、使用 Provider 组件、定义 Action 和 Reducer、连接 React 和 Redux 等步骤。学习 Redux 的应用，对于理解 React 的状态管理和复杂应用的数据流动具有重要的指导意义。
示例代码
本文使用的示例代码已上传至 GitHub，欢迎下载和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450e94a980a9b385b9c8507