随着前端应用的复杂度和用户交互的增加，以及单页应用的普及，使用 Redux 管理全局状态已成为前端开发中不可避免的一环。在本文中，我们将深入探讨如何在 React SPA 应用中使用 Redux 管理全局状态，并给出详细的学习和指导。
什么是 React SPA 应用？
React SPA （Single Page Application）应用是指一种使用 React 框架开发，同时只有一个 HTML 页面的单页应用。其特点是用户可以进行交互、无需刷新页面即可更新页面内容，同时 URL 也会保持不变。React SPA 应用使用路由（Route）控制页面显示、隐藏，减少了 HTML 页面重复加载、网络传输的次数和量，提升了应用的性能和用户体验。
Redux 简介
Redux 是 JavaScript 应用状态管理库，它提供了一种可预测的状态管理模式和一套优化和监控应用状态变化的工具。Redux 应用中的状态可被简单描述为一个单一、普通的对象，其设计初衷是帮助我们开发行为一致、易于测试的应用。Redux 应用具有以下特点：
- 单一的数据源：Redux 应用中只有一个单一的对象存放应用的状态。
- 状态是只读的：Redux 应用中的状态不能直接被修改。只能通过发起一个表示对应用状态的简单 JavaScript 对象的 action 来对状态进行修改。
- 使用纯函数来执行修改：为了表示 action 对状态的修改，我们需要编写 reducer 函数，该函数接受旧状态和一个 action 作为输入，返回新状态。
Redux 应用的核心如下：
- store：应用中唯一的状态容器，由 Redux 提供。
- action：描述状态修改的普通 JavaScript 对象。每个 action 必须包含一个类型和一些数据，用于描述执行的操作。
- reducer：接收一个旧状态和一个 action 对象，返回一个新的状态对象。Redux 应用中有很多 reducer，它们担负将整个应用状态分解成小块进行管理的职责。
- dispatch：该方法是 store 中的一个方法，用于触发 action，并通知 store 要更新状态。
- subscribe：该方法是 store 的一个方法，在 state 发生改变时，自动调用。
如何在 React SPA 应用中使用 Redux？
在 React SPA 应用中使用 Redux 首先需要安装相关依赖包，包括 React、Redux 以及 React-Redux。以下是常用的几个库和工具：
npm install react redux react-redux redux-thunk
接下来，我们将按照以下步骤来在 React SPA 应用中使用 Redux。
第一步：设计应用状态
在 Redux 应用中，需要先考虑应用中需要存放哪些数据以及如何设计这些数据的结构。
我们以一个 TodoList 来举例说明。
-- -------------------- ---- -------
-
------ -
-
--- --
----- --- -------
---------- -----
--
-
--- --
----- ---------
---------- -----
--
-
--- --
----- ---- ----- ----
---------- ----
-
--
----------------- ----------
-该状态对象包含两个属性，todos 表示 Todo 数组，visibilityFilter 表示可见性过滤器。
第二步：编写 actions
在 Redux 应用中，actions 是描述状态修改的普通 JavaScript 对象。我们需要编写 actions 来表示 TodoList 应用的状态变化，包括添加、删除和标记 Todo 任务完成等操作。
-- -------------------- ---- -------
-- -- ----
----- -------- - ----------
-------- ------- ------ -
------ -
----- ---------
----
-
-
-- -- ---- --
----- ----------- - -------------
-------- ---------- ---- -
------ -
----- ------------
--
-
-
-- --------
----- --------------------- - -----------------------
-------- ------------------- -------- -
------ -
----- ----------------------
------
-
-第三步：编写 reducer
在 Redux 应用中，reducer 负责接收旧状态和对应的 action，返回新的状态。
-- -------------------- ---- -------
------ - --------------- - ---- -------
----- -------- - ------- ------- -- -
-- ------- ----- --- ------------ -
------ -
------ ---
----------------- ----------
-
-
------ ------------- -
---- -----------
------ -
---------
------ -
---------------
-
--- -----------
----- ------------
---------- -----
-
-
-
---- --------------
------ -
---------
------ ----------------- -- -
-- ----- --- ---------- -
------ -
-----
---------- ------------
-
- ---- -
------ -
-
--
-
---- ------------------------
------ -
---------
----------------- -------------
-
--------
------ -----
-
-
------ ------- -----------------
--------
--该 reducer 针对两种 action 进行处理，分别是 ADD_TODO 和 TOGGLE_TODO。
第四步：创建 store
在 Redux 应用中，store 是应用中唯一的状态容器，负责存储应用的状态树，并提供了一系列方法来操作状态树。我们可以使用 createStore 方法创建 store。
import { createStore } from 'redux'
import rootReducer from './reducers'
const store = createStore(rootReducer)第五步：连接 React 组件和 Redux store
React-Redux 库提供了 connect 方法，它是一个高阶函数，用于将 React 组件和 Redux store 进行连接。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - -------- ----------- ------------------- - ---- ------------
----- -------- - -- ------ ----------- -------------- ------------- -- -- -
-----
------ ----------- --------- -- - ----- - ---- -- --
------- ----------- -- - ------------------------ ----------- - --- ------ -------------
----
--------------- -- -
---
-------------
----------- -- -----------------------
-------- --------------- -------------- - -------------- - ------ --
-
-----------
-----
---
-----
-----
-----
-- --
------- ----------- -- ---------------------------------------
-- --
------- ----------- -- ---------------------------------------------------
-- --
------- ----------- -- ---------------------------------------------
------
------
-
----- --------------- - ------- ------- -- -
------ -------- -
---- -----------
------ -----
---- -----------------
------ -------------- -- ------------
---- --------------
------ -------------- -- -------------
--------
----- --- -------------- ------- - - -------
-
-
----- --------------- - ----- -- -
------ -
------ ------------------------------------- --------------------------------
-
-
----- ------------------ - -------- -- -
------ -
----------- ---- -- -
-----------------------
--
-------------- -- -- -
------------------------
--
-------------- ------ -- -
-------------------------------------
-
-
-
------ ------- ------------------------ -----------------------------其中，connect 方法第一次调用将 mapStateToProps 和 mapDispatchToProps 作为参数传入，返回一个新的函数，该函数再接收一个 React 组件作为参数。这个函数内部定义了一个新的组件，这个新组件通过 props 向已连接的原始组件注入处理状态的方法（如 onAddClick、onToggleClick 和 onFilterClick），以和 store 中的状态数据建立连接。当状态发生变化时，新注入的组件会自动得到数据，并重新渲染。
第六步：使用 React 组件
我们可以在 React 组件中使用 connect 方法返回的新组件。
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ ----- ---- ---------
------ -------- ---- -----------------------
----------------
--------- --------------
--------- --
------------
-------------------------------
-总结
Redux 是一个用于 JavaScript 应用状态管理的库。在 React SPA 应用中使用 Redux 可以有效地解决一些问题，如全局状态管理和组件之间的通信。通过本文，我们深入了解了 Redux 应用的核心概念，包括 store、action、reducer、dispatch 和 subscribe 等。我们还介绍了如何在 React SPA 应用中使用 Redux，其中包括设计应用状态、编写 actions 和 reducer、创建 store 和连接 React 组件和 Redux store 等步骤。这些知识可以帮助我们更好地应对复杂的应用状态管理需求，提升应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3aad748841e989400875e