Redux - 概述

Redux - Overview

Redux - 概述

Redux is a predictable state container for JavaScript applications. It helps you manage the global state of your application in a predictable way, making applications easier to understand, debug, and scale.

Redux 是 JavaScript 应用的状态管理工具，它能帮助你以可预测的方式管理应用中的全局状态 (global state)，使应用更易于理解、调试和扩展。

As applications grow, managing state shared across many components can become complex. Passing data through multiple layers of components (prop drilling) or using local component state for everything can lead to inconsistencies and difficulties in tracking data flow. Redux addresses this by centralizing the application’s state in a single ‘store’ and enforcing strict rules for how that state can be updated.

随着应用的增长，管理跨多个组件 (components) 共享的状态会变得复杂。通过组件层层传递数据（props 逐层向下传递，即 prop drilling）或为所有内容都使用本地组件状态，都可能导致状态不一致和数据流难以追踪。Redux 通过将应用的全部状态集中到一个“store”中，并对状态如何更新施加严格规则来解决这个问题。

While Redux can be used with any UI layer (React, Angular, Vue, Svelte, or even vanilla JavaScript), it’s most commonly associated with React. The core concepts, however, are universal.

虽然 Redux 可以与任何 UI 层 (UI layer)（React、Angular、Vue、Svelte 甚至原生 JavaScript）一起使用，但它最常与 React 关联。然而，其核心概念是通用的 (universal)。

Why Use Redux?

为什么使用 Redux？

• Predictable State Management: Changes to the state follow strict rules, making the application’s behavior easier to reason about.
• 可预测的状态管理： 状态的变化遵循严格的规则，使得应用的运行行为更容易推断。
• Centralized State: All global application state lives in one place (the store), simplifying access and management.
• 中心化的状态： 所有全局应用状态都存储在一个地方（store），简化了访问和管理。
• Debugging: Tools like Redux DevTools allow time-travel debugging, action inspection, and state comparison.
• 调试： Redux DevTools 等工具支持时间旅行调试、action 检查和状态比较。
• Maintainability: Clear separation of concerns (state logic vs. UI logic) makes code easier to maintain and test.
• 可维护性： 清晰的关注点分离（状态逻辑与 UI 逻辑）使得代码更易于维护和测试。
• Community & Ecosystem: A large ecosystem of addons, middleware, and community support is available.
• 社区与生态系统： 拥有庞大的插件、middleware (中间件) 和社区支持生态系统。

Core Principles of Redux

Redux 的核心原则

Redux operates on three fundamental principles:

Redux 基于三个基本原则 (fundamental principles) 运作：

1. Single Source of Truth

1. 单一事实来源

The entire global state of your application is stored in a single JavaScript object tree within a single store. This makes it easy to inspect the state, persist it, or hydrate it for server rendering.

应用的整个全局状态存储在一个单一的 store 内的一个 JavaScript 对象树中。这使得检查状态、持久化状态 (persist) 或进行服务器渲染 (server rendering) 时恢复状态变得容易。

2. State is Read-Only

2. 状态是只读的

The only way to change the state is by dispatching an action, which is a plain JavaScript object describing what happened. You cannot directly modify the state object. This ensures that state changes are intentional and traceable.

改变状态的唯一方法是派发 (dispatch) 一个 action，它是一个描述发生了什么的普通 JavaScript 对象。你不能直接修改状态对象。这确保了状态改变是有意为之且可追溯的 (traceable)。

3. Changes Are Made with Pure Functions

3. 变化通过纯函数进行

To specify how the state tree is transformed by actions, you write pure reducers. Reducers are functions that take the previous state and an action, and return the next state. They must be pure – meaning they produce the same output for the same input and have no side effects (like API calls or modifying the original state).

为了指定状态树如何通过 action 进行转换，你需要编写纯粹的 reducer。Reducer 是函数，它们接收上一个状态 (previous state) 和一个 action，然后返回下一个状态 (next state)。它们必须是纯函数 (pure functions)——这意味着对于相同的输入，它们总是产生相同的输出，并且没有副作用 (side effects)（如调用 API 或修改原始状态）。

Redux Toolkit: The Modern Approach

Redux Toolkit：现代方法

While understanding these core principles is essential, writing Redux code manually can involve significant boilerplate (action type constants, action creators, switch statements in reducers, store configuration). The official recommendation is to use Redux Toolkit (@reduxjs/toolkit), which simplifies common Redux tasks, reduces boilerplate, and enforces best practices.

虽然理解这些核心原则至关重要，但手动编写 Redux 代码可能涉及大量的模板代码 (boilerplate)（如 action 类型常量、action 创建者 (action creators)、reducer 中的 switch 语句、store 配置等）。官方推荐使用 Redux Toolkit (@reduxjs/toolkit)，它简化了常见的 Redux 任务，减少了模板代码，并强制执行最佳实践 (best practices)。

Throughout this tutorial, we will emphasize the modern approach using Redux Toolkit while still explaining the underlying Redux concepts it builds upon.

在本教程中，我们将重点介绍使用 Redux Toolkit 的现代方法，同时仍然解释其所基于的 Redux 基本概念。