38、React 状态管理：上下文与归约器的应用

React 状态管理：上下文与归约器的应用

1. 引言

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

2. 使用归约器（Reducers）

2.1 归约器的概念

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

2.2 示例：硬币计数

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

const initialState = {count: 0, value: 0}
const reducer = (state, action) => {
  switch (action.type) {
    case "AddPenny": {
      return { count: state.count + 1, value: state.value + 1 }
    }
    case "AddNickel": {
      return { count: state.count + 1, value: state.value + 5 }
    }
    // and so on...
  }
}

c