你将学到什么

欢迎来到 Redux 基础教程! 本教程将向你介绍 Redux 并教你如何正确得使用我们最新推荐的工具和最佳实践。当你完成时，你应该能够通过已学到的工具和模式开始构建你自己的 Redux 应用程序。

在教程的第 1 节，会包含使用 Redux 需要了解的关键术语和概念，然后在第 2 节: Redux 应用骨架 我们将尝试一个基本的 React + Redux 应用程序，以了解各个部分如何组合在一起。

从第 3 节：Redux 数据流基础 开始，我们将使用这些知识来构建一个具有一些实际功能的小型社交媒体供稿应用程序，了解这些内容在实践中的实际工作方式，并讨论使用 Redux 的一些重要模式和指南。

本节将重点向你展示如何以正确的方式使用 Redux，并介绍恰到好处的概念，以便你了解如何正确构建 Redux 应用程序。

我们试图让这些解释对初学者友好，但你还是需要：

:::important 前置知识

:::

如果你对这些主题还不熟悉，我们鼓励你先花一些时间熟悉它们，然后再回来学习 Redux。当你准备好时，我们会在这里等你！

你应该确保在浏览器中安装了 React 和 Redux DevTools 扩展：

首先理解 “Redux” 是什么。它有什么作用？它帮助我解决什么问题？我为什么要使用它？

Redux 是一个使用叫做 “action” 的事件来管理和更新应用状态的模式和工具库 它以集中式 Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。

Redux 帮你管理“全局”状态 - 应用程序中的很多组件都需要的状态。

Redux 提供的模式和工具使你更容易理解应用程序中的状态何时、何地、为什么、state 如何被更新，以及当这些更改发生时你的应用程序逻辑将如何表现. Redux 指导你编写可预测和可测试的代码，这有助于你确信你的应用程序将按预期工作。

Redux 可帮助你处理共享状态的管理，但与任何工具一样，它也需要权衡利弊。使用 Redux 有更多的概念需要学习，还有更多的代码需要编写，需要添加了一些额外代码，并要求你遵循某些限制。这是短期和长期生产力之间的权衡。

在以下情况下使用 Redux：

并非所有应用程序都需要 Redux。 花一些时间思考你正在构建的应用程序类型，并决定哪些工具最能帮助解决你正在处理的问题。

想了解更多？

如果你不确定 Redux 是否适合你的应用程序，这些资源提供了更多指导：

Redux 是一个小型的独立 JS 库。 但是，它通常与其他几个包一起使用：

Redux 可以集成到任何的 UI 框架中，其中最常见的是 React 。React-Redux 是我们的官方包，它可以让 React 组件访问 state 片段和 dispatch actions 更新 store，从而同 Redux 集成起来。

Redux Toolkit 是我们推荐的编写 Redux 逻辑的方法。 它包含我们认为对于构建 Redux 应用程序必不可少的包和函数。 Redux Toolkit 构建是我们建议的最佳实践中，简化了大多数 Redux 任务，预防了常见错误，并使编写 Redux 应用程序变得更加容易。

Redux DevTools 扩展 可以显示 Redux 存储中状态随时间变化的历史记录。这允许你有效地调试应用程序，包括使用强大的技术，如“时间旅行调试”。

在我们深入研究一些实际代码之前，让我们先谈谈使用 Redux 需要了解的一些术语和概念。

让我们从一个小的 React 计数器组件开始。 它跟踪组件状态中的数字，并在单击按钮时增加数字：

这是一个包含以下部分的自包含应用程序：

接下来简要介绍 "单向数据流（one-way data flow）":

然而，当我们有多个组件需要共享和使用相同 state时，可能会变得很复杂，尤其是当这些组件位于应用程序的不同部分时。有时这可以通过 "提升 state" 到父组件来解决，但这并不总是有效。

解决这个问题的一种方法是从组件中提取共享 state，并将其放入组件树之外的一个集中位置。这样，我们的组件树就变成了一个大“view”，任何组件都可以访问 state 或触发 action，无论它们在树中的哪个位置！

通过定义和分离 state 管理中涉及的概念并强制执行维护 view 和 state 之间独立性的规则，代码变得更结构化和易于维护。

这就是 Redux 背后的基本思想：应用中使用集中式的全局状态来管理，并明确更新状态的模式，以便让代码具有可预测性。

"Mutable" 意为 "可改变的"，而 "immutable" 意为永不可改变。

JavaScript 的对象（object）和数组（array）默认都是 mutable 的。如果我创建一个对象，我可以更改其字段的内容。如果我创建一个数组，我也可以更改内容：

这就是 改变 对象或数组的例子。内存中还是原来对象或数组的引用，但里面的内容变化了。

如果想要不可变的方式来更新，代码必需先复制原来的 object/array，然后更新它的复制体。

JavaScript array/object 的展开运算符（spread operator）可以实现这个目的：

Redux 期望所有状态更新都是使用不可变的方式。 稍后会说明为什么这很重要，以及编写不可变更新逻辑的一些更简单的方法

想了解更多？

想了解 JavaScript 中的 immutability 如何工作，查看:

在我们继续之前，你需要熟悉一些重要的 Redux 术语：

action 是一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件.

type 字段是一个字符串，给这个 action 一个描述性的名字，比如"todos/todoAdded"。我们通常把那个类型的字符串写成“域/事件名称”，其中第一部分是这个 action 所属的特征或类别，第二部分是发生的具体事情。

action 对象可以有其他字段，其中包含有关发生的事情的附加信息。按照惯例，我们将该信息放在名为 payload 的字段中。

一个典型的 action 对象可能如下所示：

action creator 是一个创建并返回一个 action 对象的函数。它的作用是让你不必每次都手动编写 action 对象：

reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

说明

"Reducer" 函数的名字来源是因为它和 Array.reduce() 函数使用的回调函数很类似。

Reducer 必需符合以下规则：

稍后我们将更多地讨论 reducer 的规则，包括为什么它们很重要以及如何正确地遵循它们。

reducer 函数内部的逻辑通常遵循以下步骤：

下面是 reducer 的小例子，展示了每个 reducer 应该遵循的步骤：

Reducer 可以在内部使用任何类型的逻辑来决定新状态应该是什么，如 if/else、switch、循环等等。

当前 Redux 应用的 state 存在于一个名为 store 的对象中。

store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前状态值：

Redux store 有一个方法叫 dispatch。更新 state 的唯一方法是调用 store.dispatch() 并传入一个 action 对象。 store 将执行所有 reducer 函数并计算出更新后的 state，调用 getState() 可以获取新 state。

dispatch 一个 action 可以形象的理解为 "触发一个事件"。发生了一些事情，我们希望 store 知道这件事。 Reducer 就像事件监听器一样，当它们收到关注的 action 后，它就会更新 state 作为响应。

我们通常调用 action creator 来调用 action：

Selector 函数可以从 store 状态树中提取指定的片段。随着应用变得越来越大，会遇到应用程序的不同部分需要读取相同的数据，selector 可以避免重复这样的读取逻辑：

早些时候，我们谈到了“单向数据流”，它描述了更新应用程序的以下步骤序列：

具体来说，对于 Redux，我们可以将这些步骤分解为更详细的内容：

动画的方式来表达数据流更新：

Redux 确实有许多新的术语和概念需要记住。提醒一下，这是我们刚刚介绍的内容：

总结

我们已经看到了 Redux 应用程序的每个单独部分。接下来，继续阅读 第 2 部分：Redux 应用程序结构，我们将在其中查看一个完整的工作示例，以了解各个部分如何组合在一起。