38、React 状态管理：从 Reducer 到上下文与异步事件处理

React 状态管理：从 Reducer 到上下文与异步事件处理

1. React 状态管理背景

在构建 React 应用时，我们常常需要在组件间共享数据，传统做法是通过在 DOM 树中上下传递属性和处理程序来实现。但这种方式复杂且易出错。我们可以使用全局数据存储来避免大量的属性传递，只需确保每个组件订阅全局存储并发送操作以更改状态。React 提供了内置功能来支持这种全局数据共享，还包含可在函数组件中使用的钩子方法来访问这些数据。

为了说明全局数据的作用，我们将为音乐会页面添加一个新功能：根据用户持有的门票数量计算价格小计，并允许用户清除小计部分的所有门票。若按当前实现方式，这将涉及更多的数据上下传递，但我们可以使用上下文（context）和归约器（reducer）来集中管理数据。

2. 使用归约器（Reducers）

2.1 归约器概念

全局数据与局部数据存在不同的问题，特别是要确保所有用户对全局数据存储的更改一致，以便应用的不同部分都能访问相同状态的数据。我们可以使用 JavaScript 的归约器模式和相关的存储结构来解决全局数据问题。

归约器是一个 JavaScript 函数，接受两个参数：第一个参数是表示状态的对象，第二个参数表示要执行的操作。返回值是执行操作后表示数据状态的新状态对象。操作描述了应用逻辑中的状态变化，而归约器将其转换为数据的变化。

2.2 归约器示例

以下是一个简单的美国硬币计数示例：

const initialState = {count: 0, v