npm 包 @ngrx/entity 的使用教程

作为前端开发者，我们需要不断地寻找并应用优秀的工具以提高我们的开发效率。@ngrx/entity 就是其中一个相对优秀的工具，它可以用于帮助 Angular 应用程序中的状态管理。在本文中，我们将介绍 @ngrx/entity 是什么、它的主要功能、它的优势、它的使用教程、以及几个示例代码。

@ngrx/entity 是什么？

@ngrx/entity 是一个用于帮助 Angular 应用程序进行状态管理的库。它提供了解决方案来管理通过实体定义表示的状态，这意味着我们可以轻松地将状态转换为实体形式。@ngrx/entity 通过使用实体 ID 描述实体和选择实体，从而简化了状态管理和查询。同时，它也提供了一个整合机制，可用于将多个状态切片连接在一起。@ngrx/entity 提供了更好的性能并且减少了代码的复杂性。

@ngrx/entity 的主要功能

  • 通过实体 ID 表示实体
  • 降低代码的重复率
  • 管理实体选择
  • 整合不同的状态切片
  • 提升性能

@ngrx/entity 的优势

  • 提供更好的性能，减少了代码的复杂性
  • 通过管理实体选择，降低了错误率
  • 解决了实体定义状态的复杂性，提高了代码的可读性
  • 整合了不同的状态切片来减少冗余状态，减轻了状态管理的负担

@ngrx/entity 的使用教程

在本教程中，我们将提供一个基于 ngrx/entity 的简单示例。

首先，我们需要安装 @ngrx/entity 包。

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

接下来，我们需要引入 @ngrx/entity 到我们的 Angular 应用程序中。

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

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

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

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

我们定义了一个 User 类型和 UserState 类型。UserState 继承了 EntityState 类型，并且指定了 User 类型作为实体。

使用 createEntityAdapter 方法创建了一个适配器。它需要一个选项对象，其中包括选择实体 ID 的功能。此处我们指定了根据 User 对象的 'id' 属性来选择 ID。

我们还需要创建一个 reducer：

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

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

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

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

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

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

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

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

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

在上面的代码中，我们调用了 createReducer 方法来创建一个 reducer，它作为 usersReducer 导出。在 reducer 中，我们定义了一些针对不同操作的 reducer 函数，并在每个函数中调用了适配器的方法。

在 actions 中，我们定义了这些 reducer 可以响应的操作。如下所示：

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

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

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

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

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

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

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

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

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

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

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

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

最后，我们需要在我们的组件中使用选择器来选择和更新我们需要的实体。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

这里定义了一些包含一些简单操作的组件。我们可以使用这些操作来测试和检查实体的行为和性能。

示例代码

一个 @ngrx/entity 示例代码，包含一个用户列表的添加、删除和编辑功能。

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

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

    --- --

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上是对 @ngrx/entity 的使用教程及示例代码的详细说明，希望它能帮助你更好的进行 Angular 应用程序中的状态管理。

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

阅读全文

猜你喜欢

  • npm 包 babel-plugin-transform-require-extensions 使用教程

    什么是 babel-plugin-transform-require-extensions babel-plugin-transform-require-extensions 是一款能够将 ES6 模...

    5 年前
  • npm 包 stylelint-config-ivan 使用教程

    在前端开发工作中，代码的规范性对于团队协作和可维护性具有重要的作用。而 stylelint 是一个非常流行的 CSS 检查工具之一，它可以帮助我们遵守定义好的 CSS 规范，使得代码风格的一致性得以保...

    5 年前
  • npm 包 postcss-config-ivan 使用教程

    在前端开发中，经常会用到 CSS 预处理器，比如 Sass 和 Less 等。然而在使用这些预处理器后，我们还需要将其编译为 CSS 才能在浏览器中使用。这时候，PostCSS 就成了我们的首选。

    5 年前
  • npm 包 npm-install-webpack-plugin 使用教程

    前端开发中，Webpack 作为当前最流行的模块加载器和打包工具，承担了越来越多的工作。在使用 Webpack 进行项目开发时，我们经常需要使用一些依赖包。而 npm 是当前最流行的 JavaScri...

    5 年前
  • npm 包 eslint-config-ivan 使用教程

    作者：AI助手 日期：2021.09.17 分类：前端技术 简介 eslint-config-ivan 是一个基于 ESLint 的规则包，旨在帮助团队快速统一代码风格、提高代码质量。

    5 年前
  • npm 包 config-ivan 使用教程

    简介 npm 是 Node.js 的包管理工具，可以在其中搜索和安装多种功能丰富的包，方便开发人员进行开发。在前端开发中，经常需要管理各种配置信息和运行时参数，为了方便在项目中管理这些信息，可以使用 ...

    5 年前
  • npm 包 @kazanexpress/frontend-commitlint 使用教程

    前言 在日常开发中，版本控制非常重要。Git 提供了一套完善的版本控制机制，而作为项目协作的一种简便规范，我们通常会在 Git 提交时添加 commit message，其实这个 commit mes...

    5 年前
  • npm 包 @types/webpack-notifier 使用教程

    在前端开发中，webpack 是一个非常常用且重要的工具。webpack-notifier 则是一个方便易用的 webpack 插件，它能够在构建过程中弹出通知窗口，提示开发者构建的结果。

    5 年前
  • npm 包 `dts-bundle-webpack` 使用教程

    在开发前端项目时，使用 TypeScript 可以很好地提升代码的可读性和可维护性，但是需要将 TypeScript 编译为 JavaScript 才能在浏览器中运行。

    5 年前
  • npm 包 markdown-image-loader 使用教程

    什么是 markdown-image-loader? markdown-image-loader 是一款基于 webpack 的 loader 工具，可以将 markdown 文档中的图片资源自动转换...

    5 年前
  • npm 包 @types/webpack-node-externals 使用教程

    当使用 webpack 进行 Node.js 应用程序开发时，可能需要将某些依赖作为外部依赖来处理，这样可以在打包时减小输出的文件大小。@types/webpack-node-externals 就是...

    5 年前
  • npm 包 @types/webpack-bundle-analyzer 使用教程

    随着前端的发展，项目中需要使用到各种工具和库，其中 webpack 作为前端打包工具，在项目中发挥着至关重要的作用。而 webpack-bundle-analyzer 是 webpack 中用于分析打...

    5 年前
  • npm 包 @types/optimize-css-assets-webpack-plugin 使用教程

    介绍 优化 CSS 资源是前端开发中的一个关键任务。在 Webpack 中，通过使用 optimize-css-assets-webpack-plugin 插件可以轻松地实现这一目标，并将优化后的 C...

    5 年前
  • npm 包 @types/mini-css-extract-plugin 使用教程

    在前端开发中，CSS是很重要的一部分。CSS可以为HTML文档添加样式，并使得网站更具吸引力和易于导航。然而，CSS文件的管理和优化对于开发人员来说是一个挑战。MiniCSSExtractPlugin...

    5 年前
  • npm 包 @types/cli-progress 使用教程

    介绍 @types/cli-progress 是一个 TypeScript 类型定义文件，它提供了一种类型安全的方式来使用 cli-progress 进度条库。 cli-progress 是一个基于 ...

    5 年前
  • npm 包 ng-router-loader 使用教程

    前言 在现代 Web 开发中，前端框架已经成为不可缺少的技术。其中，Angular 是一款非常流行的前端框架，许多项目都在使用它。而 ng-router-loader 则是 Angular 官方提供的...

    5 年前
  • npm 包 @patternplate/webpack-entry 使用教程

    前言 在前端开发中，webpack 是一个十分常见的打包工具。在使用 webpack 进行打包时，我们需要指定入口文件以及配置输出等一系列操作。其中，入口文件的配置十分重要，因为它将决定我们最终输出的...

    5 年前
  • npm 包 @patternplate/probe-client 使用教程

    在前端开发中，我们经常会使用到各种开源的库或者框架来帮助我们完成一些任务。npm 是目前最流行的 Node.js 包管理器，也是前端开发过程中不可或缺的工具。在本文中，我们将介绍 @patternpl...

    5 年前
  • npm 包 @patternplate/demo-client 使用教程

    简介 @patternplate/demo-client 是一款用于实现基于 Web 技术的组件展示平台的 npm 包。该包主要基于 React 和 Sass 技术栈，可以帮助您快速开发出用于展示组件...

    5 年前
  • npm 包 @patternplate/cover-client 使用教程

    前端开发过程中，我们常常需要为我们的项目创建漂亮的封面图，以便更好地展示项目内容。@patternplate/cover-client 是一个便捷的 npm 包，它可以帮助我们为项目创建封面图，支持多...

    5 年前

相关推荐

    暂无文章