19、React 状态管理与 REST API 交互全解析

React 状态管理与 REST API 交互全解析

1. 状态管理方法概述

在开发中，我们常常会遇到组件间需要共享状态的情况。最初，我们可能会使用 props 来传递状态，但这种方法存在弊端。当子组件需要访问状态时，即使父组件本身不需要该状态，也必须进行访问。

随后，我们了解到了 React context。它可以使用 useState 或 useReducer 来存储状态，通过 context 的 Provider 组件将状态提供给组件树中的组件，组件则通过 useContext 钩子来访问状态。这种方式在多个组件需要访问状态时，比通过 props 传递状态更加便捷。

接着，我们接触到了 Redux，它与 React context 类似，但不同的是，Redux 只能有一个存储状态的中央仓库，而 React context 可以有多个。使用 Redux 时，需要在组件树中添加 Provider 组件，让组件能够访问 Redux 仓库。组件可以使用 useSelector 钩子选择状态，使用 useDispatch 钩子分发动作，由 reducers 处理动作并相应地更新状态。

以下是使用 Redux 时的关键要点总结：
| 要点 | 描述 |
| ---- | ---- |
| 状态存储 | 状态存储在中央仓库中 |
| 状态更新 | 通过分发由 reducers 处理的动作来更新状态 |
| 组件访问 | 需要在组件树中适当位置放置 Provider 组件，让组件访问 Redux 仓库 |
| 状态选择与动作分发 | 组件使用 useSelector 钩子选择状态，使用 useDispatch