使用 Ngrx 进行状态管理的 Angular 应用

在 Angular 应用中，状态管理是一个非常重要的问题。随着应用规模的扩大，状态管理变得越来越复杂，这时候就需要使用一些工具来帮助我们进行状态管理。其中 Ngrx 就是一个非常好的选择。

什么是 Ngrx

Ngrx 是一个基于 RxJS 和 Redux 构建的状态管理库。它提供了一些工具和约定来帮助我们管理应用的状态。在 Ngrx 中，应用的状态被存储在一个称为 store 的对象中，我们可以通过 dispatch 一个 action 来改变这个 store 中的状态。同时，Ngrx 还提供了一些工具来帮助我们进行异步数据获取和处理。

Ngrx 的核心概念

在深入学习 Ngrx 之前，我们需要了解一些 Ngrx 的核心概念。

State

State 是应用中的所有数据的集合。在 Ngrx 中，我们把这些数据存储在一个称为 store 的对象中。

Action

Action 是一个简单的对象，它描述了一个状态变化的事件。每个 Action 都有一个 type 属性，这个属性是一个字符串，用来描述这个 Action 的类型。除此之外，Action 还可以携带一些数据，这些数据可以被 reducer 用来更新 State。

Reducer

Reducer 是一个纯函数，它接收一个 Action 和当前的 State，然后返回一个新的 State。Reducer 的作用是用来处理 Action，更新 State。

Selector

Selector 是一个函数，它从 State 中选择一些数据，并返回这些数据。Selector 的作用是帮助我们从 State 中获取需要的数据。

Effect

Effect 是一个函数，它用来处理异步数据获取和处理。Effect 接收一个 Action，然后返回一个新的 Action 或者 Observable。Effect 的作用是帮助我们处理一些异步数据获取和处理的任务。

使用 Ngrx 进行状态管理

现在，我们来看一下如何使用 Ngrx 进行状态管理。我们将以一个简单的 TODO 应用为例。

安装 Ngrx

首先，我们需要安装 Ngrx。在终端中，执行以下命令：

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

这个命令会安装 Ngrx 的一些核心模块，包括 store、effects、entity 和 store-devtools。

创建 State

接下来，我们需要创建一个 State。在 src/app 目录下创建一个 todo 目录，并在该目录下创建一个 todo.state.ts 文件。在这个文件中，我们定义了一个 TodoState 类，它包含了一个 todoList 属性，这个属性用来存储 TODO 列表的数据。

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

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

创建 Action

接下来，我们需要创建一些 Action。在 todo 目录下创建一个 todo.action.ts 文件。在这个文件中，我们定义了两个 Action：AddTodo 和 RemoveTodo。

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

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

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

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

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

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

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

创建 Reducer

接下来，我们需要创建一个 Reducer。在 todo 目录下创建一个 todo.reducer.ts 文件。在这个文件中，我们定义了一个 todoReducer 函数，它接收一个 State 和一个 Action，然后返回一个新的 State。

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

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

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

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

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

创建 Selector

接下来，我们需要创建一个 Selector。在 todo 目录下创建一个 todo.selector.ts 文件。在这个文件中，我们定义了一个 selectTodoList 函数，它从 State 中选择 todoList 属性，并返回这个属性。

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

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

创建 Effect

最后，我们需要创建一个 Effect。在 todo 目录下创建一个 todo.effect.ts 文件。在这个文件中，我们定义了一个 TodoEffect 类，它包含了一个 loadTodoList$ 属性，这个属性用来处理异步数据获取。

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

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

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

注册模块

现在，我们已经创建了 State、Action、Reducer、Selector 和 Effect。接下来，我们需要把它们注册到应用中。在 app.module.ts 文件中，我们需要导入 StoreModule、EffectsModule 和 StoreDevtoolsModule，并把它们添加到 imports 数组中。

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

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

使用 Selector

现在，我们已经注册了 Ngrx 模块。接下来，我们来看一下如何使用 Selector 来获取 State 中的数据。在 todo.component.ts 文件中，我们可以使用 select 函数来获取 todoList 属性。

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

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

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

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

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

使用 Effect

最后，我们来看一下如何使用 Effect 来处理异步数据获取。在 todo.service.ts 文件中，我们可以使用 ActionsSubject 来 dispatch 一个 LoadTodoList Action。

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

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

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

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

运行应用

现在，我们已经完成了 Ngrx 的配置和使用。接下来，我们可以在浏览器中运行应用，并测试我们的代码。

总结

在本文中，我们介绍了如何使用 Ngrx 进行状态管理。我们学习了 Ngrx 的核心概念，包括 State、Action、Reducer、Selector 和 Effect。我们还以一个 TODO 应用为例，演示了如何使用 Ngrx 进行状态管理。希望本文能够帮助你更好地了解 Ngrx，并在实际项目中应用它。

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

阅读全文

猜你喜欢

  • 深入探讨 MongoDB 的数据模型

    前言 MongoDB 是一款流行的 NoSQL 数据库，其数据模型与传统关系型数据库有很大的不同。本文将深入探讨 MongoDB 的数据模型，帮助读者更好地理解和使用 MongoDB。

    7 个月前
  • Hapi 框架中实现多语言网站的方法

    随着全球化的发展，越来越多的网站需要支持多语言。在前端开发中，如何实现多语言网站是一个非常重要的问题。Hapi 是一个非常流行的 Node.js Web 框架，本文将介绍在 Hapi 中实现多语言网站...

    7 个月前
  • Kubernetes 故障排查：unable to connect to the server 的解决方法

    Kubernetes 是一个开源的容器编排平台，它可以自动化部署、扩展和管理容器化应用程序。然而，在使用 Kubernetes 时，有时会遇到 "unable to connect to the se...

    7 个月前
  • 使用 Jest 测试 WebRTC 应用时的问题和解决方法

    前言 WebRTC 是一种实时通信技术，可以在浏览器之间进行音视频通话、文件传输等实时通信功能。在前端开发中，WebRTC 的应用越来越广泛。在开发 WebRTC 应用时，测试是非常重要的一环。

    7 个月前
  • 如何在 Mocha 测试框架中使用 Travis CI 进行自动化测试与持续集成

    在前端开发中，测试是非常重要的一环。Mocha 是一个流行的 JavaScript 测试框架，而 Travis CI 则是一个流行的自动化测试与持续集成工具。本文将介绍如何在 Mocha 测试框架中使...

    7 个月前
  • 响应式设计中多分辨率显示适配分析

    在今天的互联网时代，人们使用各种设备来浏览网站，包括桌面电脑、笔记本电脑、平板电脑和智能手机等。这些设备拥有不同的分辨率和屏幕尺寸，因此，为了让网站在各种设备上都能够良好地显示，响应式设计变得越来越重...

    7 个月前
  • PM2：如何实现一键部署和自动化运维

    在前端开发中，我们经常需要部署和运维我们的应用程序。而这个过程往往是繁琐而且容易出错的。PM2 是一个流行的 Node.js 进程管理器，可以帮助我们实现一键部署和自动化运维，让我们的工作更加高效和稳...

    7 个月前
  • Webpack4 + Vue 的开发脚手架配置

    前言 在前端开发中，我们经常需要使用到Webpack作为构建工具，而Vue是目前很热门的前端框架之一，因此结合Webpack和Vue进行开发也是非常常见的。本文将介绍如何使用Webpack4搭建一个V...

    7 个月前
  • Fastify 对 HTTP 请求和响应的处理详解

    Fastify 是一个高效的 Web 框架，专注于提供快速和低开销的 HTTP 请求和响应处理。它是基于 Node.js 构建的，采用了最新的异步编程技术，具有出色的性能和可扩展性。

    7 个月前
  • 解决使用 Flexbox 时出现的谷歌浏览器垂直空白问题

    问题背景 在前端开发中，我们经常使用 Flexbox 布局来实现页面的布局。但是在使用 Flexbox 布局时，有时会遇到谷歌浏览器垂直空白问题。这个问题的表现是，当使用 Flexbox 布局时，容器...

    7 个月前
  • Docker 容器存储详解：挂载外部目录及数据卷

    Docker 是一个开源的容器化平台，它可以让开发者将应用程序和依赖项打包到一个可以移植的容器中，从而简化了应用程序的部署和管理。在使用 Docker 构建应用程序时，容器存储是一个非常重要的问题。

    7 个月前
  • 使用 Backbone.js 构建单页应用时要注意的 6 个问题

    随着前端技术的不断发展，越来越多的网站采用单页应用（Single Page Application，SPA）的方式进行开发。而在单页应用的开发中，使用 Backbone.js 是一种常见的方案。

    7 个月前
  • 利用 Custom Elements 实现 Web 组件共享数据

    在 Web 应用开发中，组件化已经成为了一个越来越流行的开发方式，而 Custom Elements 作为 Web 组件化的一个重要标准，提供了一种自定义 HTML 元素的方法。

    7 个月前
  • 使用 Node.js 实现自动打包及持续集成

    在现代前端开发中，自动化打包和持续集成已经成为了必备的技能，它们可以提高开发效率、减少出错率、优化代码质量等等。在本文中，我们将介绍如何使用 Node.js 实现自动打包及持续集成，帮助开发者更好地掌...

    7 个月前
  • ES9 中的 Asynchronous Iteration 和 for-await-of 语法

    ES9 中引入了 Asynchronous Iteration 和 for-await-of 语法，这是一种更加简便和高效的异步迭代方式，可以有效地提高代码的可读性和可维护性。

    7 个月前
  • Serverless 中的跨云厂商部署实践

    前言 Serverless 技术已经成为了现代应用开发的一个热门话题，它能够让开发者专注于业务逻辑的实现，而不需要过多关注底层的基础设施。然而，由于 Serverless 平台的差异性，开发者在跨云厂...

    7 个月前
  • Express.js 中如何使用 i18n 实现多语言支持

    在现代的全球化环境下，为网站或应用程序提供多语言支持已经变得越来越重要。在前端开发中，Express.js 是一个流行的 Web 框架，可以使我们快速构建 Web 应用程序。

    7 个月前
  • ES6 和 ES8：新一代 js 中实用工具函数的创造和优化

    JavaScript 是前端开发中最重要的语言之一，它的快速发展和变化让开发者需要不断学习和更新自己的知识。ES6 和 ES8 是 JavaScript 中的两个重要版本，它们引入了许多新的功能和特性...

    7 个月前
  • Enzyme 测试组件时如何模拟重定向和跳转

    在前端开发中，测试是非常重要的一环。而在 React 的开发中，Enzyme 是一个非常流行的测试工具，可以帮助我们方便地测试组件的行为和状态。在测试中，有时候需要模拟重定向和跳转的行为，以便测试组件...

    7 个月前
  • Cypress 实战：实现 JavaScript 弹框测试

    Cypress 是一款流行的前端自动化测试框架，它的特点是易于使用、快速稳定、可靠性高。在前端开发中，JavaScript 弹框是一个常见的交互组件，例如 alert、confirm、prompt 等...

    7 个月前

相关推荐

    暂无文章