Angular Redux

Redux 是一个由 Facebook 开发的响应式状态管理库，并被 React 库所使用。它基于 Flux 模式。Flux 和 Redux 之间的区别在于它们如何处理任务；在 Flux 的情况下，我们有多个 store 和一个 dispatcher，而在 Redux 中，只有一个 Store，这意味着不需要 dispatcher。

我们可以使用 NgRx 库在 Angular 框架中使用 Redux。它是一个响应式状态管理库。通过 NGRX，我们可以获取 Angular 应用中的所有事件（数据）并将它们保存在一个地方。

当我们想要使用存储的数据时，我们必须使用 RxJS 库从 Store 中接收（dispatch）它。Reactive Extensions for JavaScript 是一个基于 Observable 模式的库，在 Angular 中用于处理异步操作。

我们使用服务在组件之间共享数据（确保每次都取消订阅 observable；否则，您将面临 observable 在后台不必要地运行的风险，这会消耗资源），或者我们可以使用输入/输出数据流（确保组件具有父子关系）。

我们可以使用 ViewChild 用于嵌套组件。但对于大型项目，这些解决方案会增加项目的复杂性。如果我们有多个组件，我们可能会失去对单个组件内数据流的控制。

它在 Angular 中使用 Redux：Store 和单向数据流来降低应用程序的复杂性。对于新团队成员来说，这种流程清晰易懂。

2. 项目设置

本文将展示如何使用 Redux 和 NgRx 库轻松创建一个简单的待办事项应用程序。但在开始开发之前，我们必须确保在计算机上安装了 angular-cli。要检查它，请打开命令提示符或终端并键入 ng --version。现在一切都已设置好，我们可以开始了。

检查 Angular CLI 是否已安装。

第一步是使用终端中的以下命令生成一个新的 Angular CLI 应用程序：

ng new ngrx-todo。

生成一个新项目。

本文将展示如何使用 Redux 和 NgRx 库轻松构建一个简单的待办事项应用程序。但在开始开发之前，我们必须确保在计算机上安装了 angular-cli。要检查此项，请打开命令提示符或终端并键入 ng --version。现在一切都已设置好，我们可以开始我们的待办事项应用程序了。

为了保存待办事项应用程序的数据，我们将使用 REST API，因为我们要执行一些 CRUD 操作。我们将使用 JSON Server 将待办事项保存在 JSON 文件中，以便 Angular 可以通过 HttpClient 访问该文件。

3. 执行

项目设置完成后，我们开始实现我们的待办事项应用。第一步是为我们的应用创建一个新的模块（我们需要这样做，因为我们将把 app 模块视为整个应用程序的主模块）。

为此，我们在终端中运行 ng g module to-do，然后；我们像下面那样将此模块导入到 app.module.ts 文件中

图 3. app.module.ts 文件。

下面是我们用于组件和通用文件（服务、头部、模型等）的TodosModule 的文件夹结构。

项目文件结构.

完成应用程序结构后，我们可以开始编码。第一步是导入我们在todos.module.ts中需要使用的模块。

todos.module.ts 文件，imports 数组.

通过添加 StoreModule，我们的模块现在有了一个 Store。

在 NgRx 中，Store 就像一个内部数据库，反映了我们应用程序的状态。StoreModule 的所有数据都将包含在 Store 中。现在我们可以编写我们的待办事项 action。

Action 是一个实现 NgRx action 接口的类。Action 类有两个属性：

• type：这是一个只读字符串，描述了 action 的含义。例如，GET_TODO。
• Payload：此属性的类型取决于 action 需要将什么类型的数据发送到 reducer。在前面的示例中，payload 将是一个包含待办事项的字符串。并非所有 action 都需要具有 payload。

例如，为了获取待办事项列表，我们需要以下 actions：

待办事项 actions。

为了从 REST API 获取待办事项列表，我们将为每种类型的调用设置一个 action。这些动词将在 reducer 中使用。

Reducer 是一个知道如何处理 action 的函数。Reducer 将获取 Store 中应用程序的最后一个状态并返回新状态。此外，reducer 是一个纯函数。在 JavaScript 中，纯函数意味着对于相同的参数数量，其返回值相同，并且没有副作用（不改变外部作用域）。要获取待办事项列表，请使用如下所示的 reducer：

待办事项 reducers。

通过 GET_TODOS_SUCCESS action，我们可以看到 reducer 返回一个对象，其中包含待办事项列表、一条消息和一个 CSS 类。该对象将用于在我们的应用程序中显示待办事项列表。

此外，动词也可以在 effect 中使用。

Effect 使用流来提供新的 action 来源，以根据外部交互（如：REST API 请求或 WebSocket 消息）来减少状态。事实上，effect 是我们用于获取存储数据新状态的一种中间件。例如，要获取待办事项列表，我们必须拥有以下服务：

待办事项服务。

这是一个从 API 获取数据的简单方法。getAPITodos 方法返回一个 observable。

并且该服务的 effects 将如下所示：

待办事项 effects。

如果我们从 API 获取数据，effect 将返回 GetTodosSuccess，否则将返回 GetTodosFailed。

要访问数据，我们需要在 todo-list.component.ts 中向 store 发送一个 action。

todo-list.component.ts 文件。

todo-list.component.ts 组件的模板如下：

todo-list 组件的模板文件。

GET 操作的结果将如下所示：

GET 操作结果。

要获取您选择的待办事项列表中的项目列表，并订阅 Store 中的它。您还可以从 todos.module.ts 中的 import 数组中添加新元素。然后，您需要为您的模块（features）、reducers 和 effects 添加 stores。

todos.module.ts 更新的 imports 数组。

NgRx 用于获取待办事项列表的工作流程图。按照这些步骤，我们可以完成应用程序从 CRUD 操作到 GET 操作。以下是使用 NgRx 库进行 GET 操作的图表：

本文中的其他 CRUD 操作（创建、更新和删除）可以在 Github 的源代码中找到，并且在完成应用程序后，它应该看起来像这样：

完整的待办事项应用程序。

结论

我们可以看到将 NGRX 库添加到 Angular 项目有多么容易。在总结之前，我有一些结论：

• 如果我们想在大型应用程序中使用 NgRx 库，它非常棒。我们需要进行一些配置。如果您有 20-30 个以上的组件，这个库将很有帮助）。
• 大型应用程序使用NgRx 库，新团队成员更容易理解。
• 易于遵循数据流和调试应用程序。
• 通过在 Angular 应用程序中使用 Redux，NgRx 库变得更加健壮和灵活。