引言
随着 Web 技术日新月异的发展，越来越多的项目采用前后端分离的方式进行开发。而前端作为用户与 Web 应用的交互界面，其代码量和复杂度也逐渐增加。在这样的背景下，为了更好地管理前端代码，开发者们开始注重状态管理机制的实现。因此，Redux 作为流行的应用状态管理工具而广受欢迎。
本篇文章介绍了 Redux 在单页应用（SPA）中的使用，包括 Redux 的设计初衷、核心概念、工作原理以及详细的入门实践，帮助读者快速上手 Redux，提高 Web 应用的开发效率。
Redux 的设计初衷
Redux 的设计目标是「可预测性」（predictability）和「可维护性」（maintainability）。具体来说：
可预测性：Redux 提供了一种明确、可预测的方法来更新应用的状态（state）。开发人员能够清晰地跟踪应用程序状态的变化，这有助于减少出错概率并减轻维护负担。另外，Redux 还提供了时间旅行调试工具（time travel debugging），开发人员可以回溯到任何时间点上在应用中发生的状态变化。
可维护性：Redux 强制实行单向数据流，使得整个应用的状态集中管理，方便代码的维护和代码逻辑的调试。Redux 通过 actions、reducers 和 store 这三个基本单元，进行了一系列精细的抽象和封装，使其逻辑结构更加清晰，易于维护和扩展。
Redux 的核心概念
在学习 Redux 之前，有必要先了解其三个基本概念：
Action：是一个对象，描述了发生了什么事情，比如用户点击了一个按钮或者数据从服务器返回了。
Reducer：是一个纯函数，它接收一个 action 和当前状态（state），返回一个新的状态。Reducer 的设计理念是「基于现有的状态和 action 生成新的状态」，因此 Redux 应用程序的状态总是不可变的。这一点非常重要，因为它允许开发人员追踪状态变化历史。
Store：是一个 JavaScript 对象，它保存了应用程序的状态。可以理解为 Redux 的数据仓库，它把 actions 分发给 reducers，更新状态并触发应用程序中的视图更新。
Redux 的工作原理
Redux 的工作流程如下：
调用
store.dispatch(action)向 store 发出 action，一般在组件中触发。Redux store 调用传入的 reducer 函数，并传入当前的 state 和 action。
reducer 函数处理 state 和 action，返回新的 state。
Redux store 保存了 reducer 返回的新的 state，并且依次通知所有订阅 store 的 listeners。
监听函数重新渲染应用程序，以显示更新后的 state。
Redux 的入门实践
安装 Redux
可以使用 npm 命令进行安装：
npm install redux --save
创建 Redux Store
创建 Redux 的 Store，需要在应用程序中引入 Redux 的 createStore 方法和自定义的 reducer 函数，即可得到一个 store。以下代码演示了如何创建一个 Store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ----------------------------上述代码中，createStore 函数传入的是 counterReducer 该 reducer 函数，initialState 初始状态设置为 { count: 0 }，这里的 count 对应了一个组件内的计数器。如果在组件中调用 store.dispatch({ type: 'INCREMENT' });，store 就会调用 counterReducer 来更新计数器的值。
发布订阅模式
在 Redux 中，store 调用成功后，可以通过 store.subscribe(listener) 来订阅 store 的变化，每次 store 的状态更新后，订阅的 listener 会被调用。下面的代码演示了如何在视图中监听 store 的变化：
function render() {
document.body.innerHTML = store.getState().count;
}
store.subscribe(render);
render();我们首先通过 document.body.innerHTML = store.getState().count; 来更新视图，然后通过 store.subscribe(render); 订阅 store，当 store 发生变化时，这个订阅的 View 方法就会被调用。
调用 action 来更新 store
在应用程序中，调用 action 来更新 store。下面的代码实现了为组件添加减少计数器值的功能（注意，此代码是基于 React 的）：
-- -------------------- ---- -------
----- ------- ------- --------------- -
----------- -
------------------------------
-
----------- -
------------------------------
-
-------- -
------ -
-----
------------ - ---------------- ------
------- --------- ------------------------- -------------
------- --------- ------------------------- -------------
------
--
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ -
----------------- -- -- ---------- ----- ----------- ---
----------------- -- -- ---------- ----- ----------- --
--
-
----- ---------------- - ------------------------ -----------------------------在上述代码中，我们定义了 mapStateToProps、mapDispatchToProps 两个函数。 connect 方法将这两个方法注入到组件中的 props，如：
function mapStateToProps(state) {
return {
count: state.count
};
}该函数接收一个 state，返回一个对象，这个对象被添加到组件的 props 中。我们可以使用 this.props.count 来访问当前计数器的值。
再看一下，mapDispatchToProps 中的 onClickIncrement、onClickDecrement，它们被用来向 store 发送 INCREMENT 和 DECREMENT action，如：
function mapDispatchToProps(dispatch) {
return {
onClickIncrement: () => dispatch({ type: 'INCREMENT' }),
onClickDecrement: () => dispatch({ type: 'DECREMENT' })
};
}我们在组件中通过 this.props.onClickIncrement() 和 this.props.onClickDecrement() 来对 store 发送对应的 action，即可触发 store 更新，视图也会被更新。
总结
本文介绍了 Redux 在单页应用（SPA）中的使用。我们首先了解了 Redux 的设计初衷、核心概念和工作原理，然后通过入门示例展示了如何创建 Redux 的 Store、订阅 store 的变化以及通过调用 action 来更新 store。Redux 的使用方法有很多，本文仅仅是最基础的介绍。读者可以根据自己的需要进行更加深入的学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b26b7968c7c53b0d8383d