在 React 应用中设置 Redux 的简单指南

原帖@ Linguine Blog

在之前的一篇文章中，我写了如何通过构建一个简单的猫应用程序来使用 React 状态。

当应用程序较小的时候，维护 React 状态相对容易。

但随着应用程序的增长，React 状态树变得更加混乱、难以管理且更加复杂。

当您的应用程序状态开始保存服务器响应、缓存和 UI 状态数据时，情况就更是如此。

UI 状态数据可能包括路线信息、是否显示加载微调器、分页、选项卡等。

在某些时候，您的应用程序会发生太多事情，以至于您失去了对应用程序状态及其运行方式的控制。

Redux 是为了解决这些问题而生的

Redux 是一个小型的状态管理库。

它旨在使您的状态管理更加可预测，并集中您的 React 状态数据和状态逻辑。

Redux 通过实现 3 个核心原则来解决这些问题。

原则一：单一事实来源

您的整个应用程序状态数据都位于一个对象树中。

这棵树也可能被称为商店。

通过维护单个存储，您可以更轻松地调试或检查您的应用程序。

主体 2：状态为只读

你的 store 数据会以 React props 的形式传递下去。React 不允许你直接修改 props 对象。

这将有助于保持整个应用程序的一致性。

Redux 仅允许您通过名为 dispatch 的函数来更新您的商店数据，您必须定义要触发的操作。

这些动作描述了商店将要发生的变化或情况。

原则 3：使用纯函数进行更改

这些功能也称为减速器，它们附加到动作上。

Reducer 的工作是获取当前状态和动作并返回下一个状态。

因此，当您调用诸如ADD_CAT 之类的操作时。

Redux 将接受该操作请求，检查它是否存在以及是否附加了Reducer。

然后它将执行该reducer函数来更新存储数据。

PS Redux 不仅可以在 React 上运行，还可以在任何视图 JavaScript 库上使用，甚至可以在 vanilla JS 上使用！

将 Redux 添加到 React

为了简单起见，我将修改之前构建的猫列表应用程序，以展示如何在 React 中使用 Redux。

我知道这是另一个列表应用程序，但它很简单并且易于遵循。

此外，如果您想跟踪实际代码，请滚动到底部以获取 Github 源链接。

我需要采取的第一步是创建package.json文件。

该项目将需要以下 React 库

React – UI 库。

React DOM – 让我们将 React 应用程序附加到 DOM 的工具。

Redux – 状态管理库。

React Redux – Redux React 库让我们将 Redux 存储附加到 React 应用程序。

Redux Thunk – 对于这个例子来说，这个库有点过度，但它很受欢迎，并且想展示它的一些优点。

当应用程序变得庞大时， Redux Thunk 让我们将我们的减速器分成更小的部分，并且让我们在我们的操作中运行调度。

一旦你的package.json文件准备好了，就在终端内运行npm install 。

React 应用程序结构

这是应用程序的结构。

正如您所看到的，我有一个公共目录，其中包含初始index.html文件。

我还有一个src目录，其中包含该应用程序运行所需的几个重要文件。

index.js – 负责使 Redux 在 React 应用程序中可用，以及抓取 React 应用程序并将其转储到 HTML 上。

App.js – 主应用程序源文件。它允许你添加猫咪名称，并以列表形式显示。

store.js – 是抓住减速器并从中创建 Redux 存储的粘合剂。

reducers/cats.js – 负责描述猫咪减速器的样子，命名动作，并将动作附加到修改猫咪减速器数据的函数。

现在您已经了解了应用程序的结构，让我们开始研究代码。

创建 Redux Reducer

首先，我将构建我的 cat 减速器文件。

我要创建的第一件事是一个名为initialState的变量。

initialState将保存一个名为list的属性，它是猫名的数组。

initialState还定义了猫状态的初始状态。

下一个要创建的变量称为actions。

actions是一个键值对对象。

键是动作的名称，值是要执行的reducer。

在actions变量的正下方，我定义了一个名为addCat的简单函数。

这个名字很容易理解。该函数将猫的名字添加到状态的列表属性中。

创建 Redux 存储文件

这个文件可能看起来很吓人，但其实没那么糟糕。我会一步一步讲解。

首先，我导入 Redux 库，以及上面创建的 cat reducer 文件。

其次，我创建了一个名为createReducer的函数，它将初始状态和动作粘合在一起，从而创建一个减速器。

我用它来创建我的 cat reducer，然后注入一个名为 * rootReducer * 的变量。

然后，我使用创建商店功能导出一个新商店，并为其提供一些中间件的根减速器。

在这个应用示例中，使用combineReducers可能有点过度，但它向你展示了如何拆分和添加 reducer 到你的 Redux 存储中。

创建猫咪名单应用程序

下一个要处理的文件是App.js文件。此文件将负责显示 UI，允许用户输入新的猫名，并将其添加到 Redux Store。

如果您不熟悉 React hooks，我强烈建议您阅读这篇文章，它将告诉您它们的工作原理和使用方法：React useState。

继续，这个文件很大。再次一步步来。

这里的第一步是导入 React useState和React Redux 库中的connect函数。

然后我将创建名为App的 React 组件。

然后，我将连接函数内的App React 组件导出为 HOC（高阶组件）。

您可能会问，“connect 起什么作用？”

好问题，connect函数让 React 组件将自己锁定到 Redux 存储上。

connect函数不会修改组件，但它会创建一个新组件来传递来自 Redux 存储的任何状态数据，并且它提供了一个名为dispatch 的函数。

这是一个儿童插图，可以直观地了解它是如何工作的。

Redux connect接受一些参数，但我将介绍其中最重要的两个。

在上面的例子中，我只传递了 Redux 调用的第一个参数mapStateToProps。

mapStateToProps是一个函数，它允许你选择所需的 Redux 存储数据。

在App.js文件中，我决定获取全部，但您不必这样做。

如果提供了第一个参数，那么包装器组件将订阅 Redux 存储。

它就像一个监听器，始终为您创建的组件提供最新的数据。

如果您不希望您的应用订阅商店，只需传递null或undefined作为第一个参数。

Redux connect 中的第二个参数是mapDispatchToProps。

mapDispatchToProps允许您创建自定义调度函数并将其传递给 React 组件。

让我们看一下 React 组件的输入和按钮部分。

在 React 组件内部和return语句之前，我为猫名创建了一个新的useState钩子。

我还在onChange事件的输入 HTML 元素内附加了setCatName。

因此，每当用户输入新的猫名时，setCatName就会触发，并更新catName的值。

我还添加了一个按钮，用于在onClick事件上提交新的猫名。

在onClick事件中，我设置检查猫咪名称是否为空。如果为空，则返回一个alert，提示“猫咪名称不能为空！”

如果有名字，我想使用dispatch触发ADD_CAT Redux 操作，并在名为payload的属性中提供新的猫名值。

有效载荷是通过调度传递数据时的常见做法。

它不必被称为有效载荷，您可以随意命名。但是属性类型必须存在。

在调度函数之后，我将猫名值重置为空字符串。

dispatch又做了什么？？

是的，dispatch是一个只能从 Redux connect获得的功能。

Dispatch 允许您触发在 Reducer 文件中定义的操作，这是修改 Redux 存储的唯一方法。

将 dispatch 视为Redux 的setState 。

App.js文件中要完成的最后一部分是显示我从 Redux 存储中获取的猫名。

添加 Redux 存储提供程序组件

最后，这是这部杰作的最后一部分。

在我们的index.js文件中，我将把 Provider 组件添加到 React 应用程序，并从store.js文件提供创建的商店。

Provider 组件使 Redux 存储可供已包装在connect函数中的任何嵌套组件使用。

将提供程序置于顶层是一种很好的做法，这样整个 React 应用程序都可以访问 Redux 存储数据。

结论

Redux 有很多样板和移动部件，但是一旦你开始理解它；你就会更清楚地了解这个状态管理工具如何帮助管理大型项目。

如果您有任何问题，请随时在Twitter上询问我。

Github 源链接