使用 NgRx 实体简化您的 Angular 代码

夏天，我通过构建一个小应用程序来处理我最喜欢的地方，刷新了我的 NgRx 技能。在此过程中，我很喜欢 NgRx，因为我可以真正控制应用程序的状态。

引起大量噪音的一件事是为 CRUD 操作定义的选择器和操作的数量。在我的个人项目中，这并不是太麻烦，但是当我构建一个包含许多切片和部分以及选择器和化简器的大型应用程序时，代码变得更难以维护。

例如，编写成功、错误、更新和删除的操作以及每个操作的选择器，增加了复杂性并需要更多测试。

这就是 NgRx 实体 发挥作用的地方。 NgRx 实体 减少样板代码，简化测试，加快交付时间，并使代码库更易于维护。在本文中，我将引导您使用 NgRx Entities 重构项目中位置的状态管理，以简化 CRUD 逻辑。

NgRx 实体是什么以及为什么？

在深入研究代码之前，让我们首先了解 NgRx 实体 是什么以及为什么应该考虑使用它们。

什么是@NgRx/实体

NgRx 实体 是 NgRx 的扩展，可简化数据收集的工作。它提供了一组实用程序，可以轻松执行从状态添加、更新和删除实体以及从存储中选择实体等操作。

为什么我需要迁移到 NgRx 实体？

在为集合构建CRUD操作时，在reducer中手动编写方法并为每个操作创建重复的选择器可能是乏味且容易出错的。 NgRx Entities 减轻了大部分责任，减少了需要编写和维护的代码量。通过最小化样板代码，NgRx Entities 有助于降低大型应用程序中的技术债务并简化状态管理。

它是如何运作的？

NgRx Entities 提供了 EntityState、EntityAdapter 和 预定义选择器 等工具来简化集合的工作。

实体状态

EntityState 接口是 NgRx Entities 的核心。它使用两个关键属性存储实体的集合：

• ids：实体 ID 数组。

• entities：一个字典，其中每个实体都按其 ID 存储。
  

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

了解有关实体状态的更多信息

实体适配器

EntityAdapter 是使用 createEntityAdapter 函数创建的。它提供了许多用于管理状态中的实体的帮助器方法，例如添加、更新和删除实体。此外，您还可以配置实体的识别和排序方式。

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

EntityAdapter 还允许您定义如何识别实体 (selectId) 以及如何使用 sortComparer 对集合进行排序。

了解有关 EntityAdapter 的更多信息

现在我们了解了基础知识，让我们看看如何使用 NgRx 实体

重构应用程序中地点的状态管理

设置项目

首先，克隆上一篇文章中的存储库并切换到具有基本 CRUD 设置的分支：

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

?本文是我学习 NgRx 系列的一部分。如果你想跟的话，请看一下。

https://www.danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular

https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools

https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx

https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular

https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-c rud-with-ngrx

https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

此分支包含已安装 NgRx 的设置，并为 API 调用配置了 MockAPI.io。

我们的目标是使用NgRx实体来管理场所，重构actions进行CRUD操作，更新 reducer 使用适配器操作（例如添加、更新和删除地点）来简化它，使用选择器 从商店中检索地点列表。

安装 NgRx 实体

首先，使用 npm i 安装项目依赖项，然后通过运行 ng add @ngrx/entity 使用原理图添加 NgRx 实体。

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

完美，我们准备开始重构！

重构国家

在项目的早期版本中，我们手动定义了数组和减速器来管理状态。通过 NgRx Entities，我们让适配器为我们管理收集逻辑。

首先，打开places.state.ts并重构PlacesState以从EntityState扩展。

npm i
ng add @ngrx/entity

接下来，使用 createEntityAdapter 初始化 Place 实体的实体适配器：

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

最后，使用 getInitialState 将手动的initialState替换为适配器提供的initialState：

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

我们重构了状态以使用 EntityState 并初始化 EntityAdapter 来自动处理地点列表。

让我们更新操作以使用 NgRx 实体。

重构动作

在之前的文章中，我手动处理了实体的更新和修改。现在，我们将使用 NgRx Entities 来使用 Update 处理部分更新。

在places.actions.ts中，我们更新Update Place操作以使用Update，这允许我们仅修改实体的一部分：

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

完美，我们更新了与 NgRx 实体 一起使用的操作，使用 Update 类型来简化处理更新。是时候看看这对减速器有何影响，并重构它以使用实体适配器方法进行添加、更新和删除位置等操作。

重构Reducer

reducer 是 NgRx Entities 真正发挥作用的地方。我们现在使用实体适配器提供的方法，而不是编写用于添加、更新和删除地点的手动逻辑。

以下是我们如何简化减速器：

npm i
ng add @ngrx/entity

我们使用适配器中的 addOne、updateOne、removeOne 和 setAll 等方法来处理状态中的实体。

其他有用的方法包括：

• addMany：添加多个实体。

• removeMany：通过 ID 删除多个实体。

• upsertOne：根据实体的存在添加或更新实体。

阅读有关EntityAdapter中reducer方法的更多信息。

重构状态、操作和化简器后，我们现在将重构选择器以利用 NgRx Entities' 预定义选择器。

重构选择器

NgRx Entities 提供了一组预定义的选择器，使查询商店变得更加容易。我将直接从适配器使用 selectAll、selectEntities 和 selectIds 等选择器。

以下是我们如何重构places.selectors.ts中的选择器：

export type PlacesState = {
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
} & EntityState<Place>;

这些内置选择器显着减少了手动创建用于访问状态的选择器的需要。

重构选择器以使用预定义的选择器，减少手动定义选择器的需要，是时候更新我们的表单组件以反映这些更改并使用新的状态和操作了。

更新表单组件

现在我们已经重构了状态、操作和化简器，我们需要更新表单组件以反映这些更改。

例如，在 PlaceFormComponent 中，我们可以更新 save 方法以使用 Update 方法。保存更改时输入：

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

我们更新了表单组件以使用新的操作和重构的状态，让我们移动，检查我们的效果以确保它们与 NgRx 实体

正常工作

重构效果

最后，我将使效果与 NgRx Entities 一起使用，我们只需要更新 PlacesPageActions.updatePlace 并传递正确的 Update 即可。 updatePlaceEffect$ 效果中的对象。

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

完成！我的应用程序正在与 NgRx 实体 一起使用，迁移非常简单！，ngrx 实体的文档非常有帮助，并且

结论

将我的代码移动到 NgRx Entities 后，我觉得它有助于降低处理集合时的复杂性和样板代码。 NgRx 实体在大多数情况下简化了集合的使用以及与其大量方法的交互，消除了 CRUD 操作所需的大部分样板代码。

我希望这篇文章能够激励您在需要使用 ngrx 中的集合时使用 ngrx-entities。

• 源代码：https://github.com/danywalls/start-with-ngrx/tree/ngrx-entities

照片由 Yonko Kilasi 在 Unsplash 上拍摄

以上是使用 NgRx 实体简化您的 Angular 代码的详细内容。更多信息请关注PHP中文网其他相关文章！