Module 03 · In-depth Understanding of Advanced React Functionality深入理解 React 高级功能
Essential Concepts of ReduxRedux 基本概念
欢迎观看本视频！今天，我们将介绍 Redux 的核心概念。观看完后，您将能够：
- 讨论 Redux 中的核心概念，如 action、store 和 reducer
- 描述 Redux 架构背后的原理
- 解释 dispatching 和 action creators 的术语
- 将 action、store 和 reducer 与用户界面示例相联系
Redux 概述
Redux 提供了一个集中式的状态管理系统。在使用 Redux 时，您不需要单独管理每个组件的状态，而是将状态集中管理在应用级别，而非单个组件内。
- 在这种方式下，您应该将组件属性视为不可变（immutable）。
- 每次更新状态时，您会创建新的状态对象，而不是修改现有对象。
Redux 通过以下几个核心概念来更新组件属性：
- Store
- Action
- Reducer
接下来，我们将简要讨论这些概念，并进一步深入探讨。
Store—— 存储应用状态
Store 保存应用的所有当前状态。Redux 中的状态并不是每个组件的独立状态，而是应用的全局状态。Store 使用 状态树（state tree）来存储和管理应用状态。
状态树是一个 JavaScript 对象，包含了管理其属性的方法。
Action—— 描述要执行的操作
Action 是一个对象，描述了需要执行的操作。它包含以下重要属性：
- type：标识要执行的操作类型
- payload：存储更新状态所需的其他数据
Action 示例：
假设在一个电商应用中，用户点击 “添加到购物车” 按钮。此时，会触发一个 addItem 的 Action Creator 函数，返回一个包含操作类型和负载数据的 Action 对象。
Reducer—— 定义如何更改状态
Reducer 是一个纯函数，负责根据 Action 来计算并返回新的状态。它接收两个参数：
- 当前状态（current state）
- Action 对象（包含 type 和 payload）
Reducer 的特点：
- 纯函数：相同输入永远返回相同输出，不会产生副作用或修改外部状态。
- 不直接修改状态：通过返回新的状态对象来替代原有状态。
Reducer 的作用：
在我们的购物车示例中，当用户点击 “添加到购物车” 时，store 会根据该 Action 调用适当的 Reducer，并将 Action 对象 和 当前状态 传递给它。Reducer 根据这些信息计算出新的状态，并将其返回给 Store。
Dispatching Action—— 触发状态更新
Dispatching 是将 Action 对象 发送到 Store 的过程。具体步骤如下：
- Action Creator（如
addItem）创建并返回 Action 对象。 - 组件通过 dispatch 函数将该 Action 对象 发送到 Store。
整个过程被称为 dispatching an action。
Redux 架构与应用
Redux 架构的原理：
Redux 的设计使得状态管理变得可预测和可追踪。通过明确的 Action、Reducer 和 Store，您可以清晰地理解每次状态变化的来源和过程。
- 明确性：状态变化是通过 Action 和 Reducer 显式定义的，使得代码更易于理解和维护。
- 易于调试：由于状态的变化是显式的，调试变得更加简单。
- 提高可维护性：将 Action 的描述与如何改变状态的实现分开，简化了代码的维护工作。
总结
在本视频中，您学习了以下内容：
- Action 对象描述了需要执行的操作，包含 type 和 payload 属性。
- Store 维护应用程序的所有当前状态，使用状态树来管理状态。
- Reducer 告诉 Store 如何改变状态，计算并返回新的状态。
- Dispatching Action 的过程通过 Action Creator 创建并发送 Action 对象，并使用 dispatch 函数将其传递给 Store。
Redux 的架构使得状态管理变得可预测，状态的变化通过 Actions、Reducers 和 Store 显式定义，从而提高了代码的可读性、调试性和可维护性。🚀