用 Angular 的 Ngrx 库管理应用数据的最佳实践

面试官：小伙子，你的数组去重方式惊艳到我了

简介

在一个 Angular 程序中，数据是非常重要的。在前端页面中，数据是用来填充页面的动态内容。在一个典型的 Angular 应用中，需要管理各种各样的不同类型的数据。为了管理 Angular 应用中的数据，我们可以使用 Ngrx 库，这是一个优秀的 Redux 模式的 Angular 实现。使用 Ngrx 库可以帮助我们管理 Angular 应用中的状态，提供更好的应用程序性能和更好的代码组织性。

在本文中，我们将介绍如何在 Angular 应用中使用 Ngrx 库管理应用程序数据的最佳实践。我们将首先介绍 Ngrx 库的主要概念和功能。结果，我们将介绍如何重构旧的应用程序以充分利用 Ngrx 库，并最终演示如何使用 Ngrx 库从头构建新的应用程序。

Ngrx 库的主要概念和功能

Ngrx 库是建立在 Redux 模式之上的 Angular 应用。Redux 模式是一种可预测的状态管理模式，已被证明非常适合于大规模应用程序。Redux 模式中有三个基本的对象：状态，操作和 Action。

状态

状态是应用程序的数据。在 Redux 中，状态存储在一个单一的 JavaScript 对象中。在 Ngrx 库中，状态存储在一个 RxJS 可观测序列中。这个序列可以被订阅从而观察状态的变化。

操作

操作是改变状态的一种方式。在 Redux 中，操作是一个纯的函数，它采用当前状态和一个操作参数，计算新的状态并返回。在 Ngrx 库中，操作是一个纯的函数，它采用当前状态和操作参数，计算新的状态并返回。这个函数没有副作用，也不需要处理异步操作。

动作

动作是传达关于如何更改状态的信息。在 Redux 中，动作是一个纯 JavaScript 对象，由一个类型字段和可选负载组成。在 Ngrx 库中，动作是一个纯 JavaScript 对象，其中包括一个类型字段和一个可选负载。当操作执行时，它会生成一个动作。这个动作会被发送到 Ngrx 库的应用程序状态中。

旧应用程序的重构

如果你已经有一个现成的 Angular 应用程序，你可以通过重构该程序来利用 Ngrx 库的优势。下面是一些重构步骤：

  1. 将应用程序中的所有状态放入单一的状态存储对象中。所有状态都应该位于一个名为 appState 的对象中。这个对象应该是一个可观察序列，以便在状态发生变化时与组件同步。
------ --------- -------- -
  ------ ------------
  ----- -----
-

----- ------------- -------- - -
  ------ ---
  ----- ---------
-

----- -------- - --- ----------------------------------------

-------------
------ ----- --------------- -
  ------- -------------------- - ------------------------

  ------------- --------- -
    ------------------------
  -
-
  1. 创建一个操作对象和一些操作的纯函数。操作应该采用当前状态和操作参数，并计算新状态。使用 redux-observable 库，你将能够为你的操作添加异步行为。
------ ----- ------- - -------------------- ----- ------- ----- ------ ------
------ ----- -------------- - -------------------- --- --------- ------- ----- ---- ------
------ ----- ---------- - -------------------- -------- ------- --- ------ ------

------ -------- ------------------ ------- -
  ------ ------------- -
    ---- ----- --- ---------
      ------ -
        ---------
        ------ ---------------- ------------
      --
    ---- ----- --------
      ------ -
        ---------
        ------ ----------------------- -- ------- --- ----------
      --
    --------
      ------ ------
  -
-

-------------
------ ----- ----------- -
  ------------
    ------- ---------------- ----------------
    ------- ----- ----------
  - --

  --------- ------- -
    ----- -- - ----------
    ----- ---- - -
      ---
      -----
      ---------- -----
    --
    ---------------------------- ----------------
      ----- -- -
        ------------------------------------------------------------ ---------------- ----- --- -----
      -
    --
  -

  ---------- ------- -
    -----------------------------------------------
      -- -- -
        ------------------------------------------------------------ ------------------- -- -----
      -
    --
  -
-
  1. 创建一个组件，它可以通过订阅状态或调度操作来响应状态变化。
------------
  --------- -----------
  --------- -
    ------ ------------------ ------------
    ------- ----------------------- -------------
    ----
      --- ----------- ---- -- -------
        -- --------- --
        ------- --------------------------------------
      -----
    -----
  -
--
------ ----- ------------- -
  ------ ------------

  ------------
    ------- ---------------- ----------------
    ------- ------------ -----------
  - -
    ---------------------------------
      --------- -- -------------
      -----------------------
      ------------------------
    ------------------- -- -
      ---------- - ------
    ---
  -

  --------- -
    --------------------------------
    --------- - ---
  -

  ------------ -
    ---------------------------------
  -

  ------------- -
    ---------------------
  -
-

使用 Ngrx 库从头构建新的应用程序

如果你要从头开始构建一个新的 Angular 应用程序，下面是一些步骤，可以帮助你充分利用 Ngrx 库的优势：

  1. 创建一个包含所有应用程序状态的单一状态存储对象。状态应该位于一个名为 AppState 的对象中，应该是一个可观察的序列，以便在状态变化时与组件同步。
------ --------- -------- -
  ------ ------------
  ----- -----
-

----- ------------- -------- - -
  ------ ---
  ----- ---------
-

----- -------- - --- ----------------------------------------

-------------
------ ----- --------------- -
  ------- -------------------- - ------------------------

  ------------- --------- -
    ------------------------
  -
-
  1. 创建操作以改变状态，并在需要时将它们添加到操作组件中。你可以使用 @ngrx/effects 添加异步行为，例如调用 Web 服务或访问浏览器存储。
------ ----- ------- - -------------------- ----- ------- ----- ------ ------
------ ----- -------------- - -------------------- --- --------- ------- ----- ---- ------
------ ----- ---------- - -------------------- -------- ------- --- ------ ------

------ ----- -------- - -------------------- -------
------ ----- --------------- - -------------------- ---- --------- ------- ------ ----------- ------

-------------
------ ----- ----------- -
  ------------
    ------- --------- --------
    ------- ---------------- ----------------
    ------- ----- ----------
  - --

  --------- - --------------- --
    -------------------
      -----------------
      ------------ --
        ---------------------------------
          ---------- ----------- --
            ----------------- ------ ------------ -- -- ------- --- ------- --- --
          --
          ------------- -- ---- ----- ------- ---- ---- ------ ---
        -
      -
    -
  --

  -------- - --------------- --
    -------------------
      ----------------
      --------------- --
        ---------------------------- - ---------- --- --------- --------
          --------- --
            ---------------- ----- - ------------ --- ------ - --
          --
          ------------- -- ---- ----- ------ ---- --- ------ ---
        -
      -
    -
  --

  ----------- - --------------- --
    -------------------
      -------------------
      --------------- --
        -------------------------------------------------
          ------ --
            ------------------- --- --------- --
          --
          ------------- -- ---- ----- ------ ---- ------ ------ ---
        -
      -
    -
  --
-
  1. 创建一个应用程序的组件。你应该将组件与状态和操作连接起来，以便在状态变化时和操作发生时更新状态。
------------
  --------- -----------
  --------- -
    ------ ------------------ ------------
    ------- ----------------------- -------------
    ----
      --- ----------- ---- -- -------
        -- --------- --
        ------- --------------------------------------
      -----
    -----
  -
--
------ ----- ------------- -
  ------ ------------

  ------------
    ------- ------ ---------------
  - -
    ----------------
      ------------ -- -------------
      ------------------------
    ------------------- -- -
      ---------- - ------
    ---

    --------------------------------
  -

  --------- -
    ----------------------------- ----- --------- ----
    --------- - ---
  -

  ------------ -
    -------------------------------- --- ------- ----
  -

  ------------- -
    ---------------------
  -
-

结论

使用 Ngrx 库是管理 Angular 应用程序数据的最佳实践。在本文中，我们介绍了 Ngrx 库的主要概念和功能，并展示了如何重构旧的应用程序以充分利用 Ngrx 库。我们还演示了使用 Ngrx 库从头构建 Angular 应用程序的步骤。当应用程序变得复杂时，使用 Ngrx 库是管理数据的必要工具之一，可以帮助我们提高应用程序性能，提高代码组织性和开发效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6709e7ddd91dce0dc87ce94f

阅读全文

猜你喜欢

  • 如何保护 RESTful API 的安全防护

    随着互联网技术的快速发展，基于 RESTful API 的应用越来越普及，我们需要保护 RESTful API 的安全，以防止黑客攻击和数据泄漏。本文将深入讨论如何保护 RESTful API 的安全...

    8 天前
  • Docker Swarm 揭秘：构建高可用、高可扩展的容器化集群

    随着现代化应用程序越来越复杂，以及云计算和容器技术的普及，一个高可用、高可扩展的容器化集群已经变得越来越重要。Docker Swarm 是 Docker 官方出品的容器编排工具之一，它为容器集群提供了...

    8 天前
  • Cypress 自动化测试中如何进行文件上传测试

    引言 作为一名前端工程师，我们通常需要进行自动化测试，以保证代码质量和项目可靠性。在自动化测试中，文件上传测试是非常常见的场景。但是，相比于其他自动化测试，文件上传测试的实现方式有些不同，需要使用特殊...

    8 天前
  • ES12 中处理二进制数据

    ES12 最近发布了一些新的特性，其中包括对处理二进制数据的支持。在本文中，我们将讨论这些改进及其用例，并提供一些示例代码来帮助您入门。 ArrayBuffer ArrayBuffer 是一种 Jav...

    8 天前
  • 在分布式系统中优化数据分片和数据分布

    在分布式系统中，数据的分片和分布对于系统的性能和扩展性具有至关重要的作用。在本文中，我们将深入探讨如何优化数据的分片和分布，以提高系统的性能和可扩展性。 数据分片 数据分片是将大型数据集合分解为较小的...

    8 天前
  • 如何在 GraphQL 中使用异步查询？

    GraphQL 是一种用于 API 构建的查询语言和运行时，它提供了一种更加高效、强大和灵活的方式来获取和操作数据。在 GraphQL 中，我们通常使用查询语句来请求需要的数据，然后服务器会返回一个由...

    8 天前
  • 使用 Mocha 和 Chai 测试 Redis 数据库

    引言 Redis 是一款经典的 NoSQL 数据库，它的轻量级和高性能使其成为开发者、架构师和数据科学家的趋之若鹜的选择。然而，当你开始构建你的应用程序并使用 Redis 作为数据存储时，你需要确保你...

    8 天前
  • 如何使用 Chai 和 Mocha 测试 JavaScript 的 Promise

    JavaScript 是一种非常流行的脚本语言，它的异步编程神器 Promise 被广泛应用于前端开发中。在编写异步代码时，如何确保代码的正确性和可靠性是一个很重要的问题。

    8 天前
  • 使用 ES8 的 async/await 处理异步操作

    在前端开发中，经常需要处理异步操作，例如从服务器获取数据或调用一些浏览器 API。在 JavaScript 中，通常会使用回调函数或 Promise 来解决这个问题。

    8 天前
  • 无障碍技术应用于 K12 在线教育平台的实践案例

    随着在线教育的快速发展，许多学生都可以通过网络获得高质量的教育资源。但是，在线教育平台的不断出现也意味着需要考虑各种学生的需求，特别是需要考虑到那些有障碍的学生。设计和开发一个无障碍的在线教育平台可以...

    8 天前
  • 咋不早点学，Express.js 实战教程来了

    前端开发一直是热门的职业领域之一，而 Express.js 是一个非常流行的 Node.js Web 应用框架。如果你还没有学习过 Express.js，那么现在是时候开始了。

    8 天前
  • TypeScript 使用装饰器时的最佳实践

    TypeScript 是一种静态类型检查的 JavaScript 超集，它增加了代码可维护性、模块化和可读性，使得代码更加健壮和容易维护。在 TypeScript 中，装饰器（decorators）是...

    8 天前
  • 使用 Docker 在 macOS 上构建 Linux 开发环境

    随着前端开发技术的不断发展，开发人员需要不断地学习新的技术和工具。其中，Docker 是一个非常重要的工具，可以帮助开发人员快速构建开发环境。本文将介绍如何使用 Docker 在 macOS 上构建 ...

    8 天前
  • 解决使用 ES11 中 Array.from 方法遇到的一些问题

    引言 在现代前端开发中，我们经常需要对数组进行一些操作，比如筛选、排序、去重等等。为了方便处理和操作数组，ES6 引入了许多新的 Array 方法。其中，Array.from() 方法可以将数组类似的...

    8 天前
  • Kubernetes 中 Ingress 配置 SSL 证书的方法

    随着云计算技术的发展，Kubernetes 已经成为了容器编排和管理的事实标准。在 Kubernetes 集群中，Ingress 是用于管理外部流量的核心组件。通过 Ingress，我们可以将流量路由...

    8 天前
  • ES9 中的 Async generators

    在 ES9 (ECMAScript 2018) 中，引入了 Async generators，这是继 Promise 和 Async/await 之后又一种异步编程的解决方案。

    8 天前
  • Mongoose 中的 JSON Web Token(JWT) 实现详解

    在前端开发中，认证和鉴权是很重要的一部分。而 JWT(JSON Web Token) 是一种广泛使用的认证和鉴权方案。本文将介绍如何在 Mongoose 中使用 JWT 实现认证和鉴权。

    8 天前
  • 如何在 Express 和 Fastify 两个框架中进行技术选型？

    在前端开发中，选择适合自己的框架是非常重要的一步。 Express 和 Fastify 是目前非常流行的前端框架，但是在它们之间进行选择并不是一件容易的事情。本文将从多个方面来对比这两个框架，帮助读者...

    8 天前
  • Redis 使用的正确姿势：使用 Lua 脚本批量操作

    Redis 是一个基于内存的高性能键值存储数据库，常被用于缓存和会话管理。在前端应用中，我们经常需要使用 Redis 来存储一些易失性数据，例如用户登录信息、购物车数据等等。

    8 天前
  • 使用 Socket.io 实现实时分发器

    使用 Socket.io 实现实时分发器 前言 在现代 Web 开发中，实现实时通信已经变成了一种越来越普遍的需求。然而，尽管可以使用传统的轮询技术实现这种实时通信，但是它可能会带来很多不必要的开销，...

    8 天前

相关推荐

    暂无文章