在前端开发中，数据管理是至关重要的。通过使用合适的工具和技术，我们可以有效地管理和操作数据。在 Angular 开发中，一个受欢迎的数据管理库就是 ngrx。为了简化 ngrx 的使用和扩展，ngrx-demo-core 库被开发出来。在本文中，我们将学习如何使用 ngrx-demo-core 库。
什么是 ngrx-demo-core
ngrx-demo-core 是一个基于 ngrx 的数据管理库，它提供了一些基本的 ngrx 功能和模板，这样你就不必从头开始编写每个 ngrx 特性模块了。它还包含了多种实用工具和助手函数，让 ngrx 应用的开发更加简单和高效。
安装和导入
首先我们需要安装 ngrx-demo-core 库。可以通过以下命令来安装，这里假设你已经创建了 Angular 项目。
npm install ngrx-demo-core
安装成功后，我们可以在代码中导入 ngrx-demo-core：
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { CoreModule, NgrxDemoCoreModule } from 'ngrx-demo-core';现在我们已经成功地导入了 ngrx-demo-core 库，接下来让我们看看如何使用它来管理数据。
状态管理
ngrx-demo-core 库提供了一些基本的状态管理功能，它们在我们的应用程序中扮演重要角色。
状态定义
状态（state）是我们应用程序的核心，它保存了整个应用程序中的数据。在 ngrx-demo-core 中，我们可以利用 createState 函数来创建状态。下面是一个简单的例子：
-- -------------------- ---- ------- ------ - ----------- - ---- ----------------- --------- -------- - ----------- -------- - ----- ------------- -------- - - ----------- ------ -- ------ ----- -------- - ------------------------- -------
在这个例子中，我们首先定义了一个 AppState 接口来表示我们的状态。然后，我们创建了一个初始状态，其中 isLoggedin 属性被设置为 false。最后，我们调用了 createState 函数来创建状态，该函数将初始状态和状态名称作为参数。在这里，我们将状态命名为 app。
状态选择器
状态选择器（selectors）是用于从状态中选择一部分数据的函数。在 ngrx-demo-core 中，我们可以使用 createSelector 函数来定义状态选择器。下面是一个例子：
import { createSelector } from '@ngrx/store';
import { appState } from './app.state';
const isLoggedInSelector = createSelector(
appState,
(state: AppState) => state.isLoggedin
);在这个例子中，我们使用 createSelector 函数从状态中选择了 isLoggedin 属性。创建选择器需要传入两个参数，第一个参数是我们刚刚创建的状态，第二个参数是表示我们要选择的属性的回调函数。
状态更新
状态更新通常发生在我们应用程序中发生事件时。在 ngrx-demo-core 中，我们可以利用 reducer 函数去更新状态。下面是一个例子：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
------ - -------- - ---- --------------
----- ---------- - ----------------------- -
------ ------- --------- -- -
------ - --------- ----------- ---- --
--
------- ------- --------- -- -
------ - --------- ----------- ----- --
--
---
------ -------- -------------- ---- ------- ---- -
------ ----------------- --------
-在这个例子中，我们创建了一个 reducer 函数，用于更新应用程序的状态。我们使用 createReducer 函数来创建一个 reducer，并将它传递给 reducer 函数中。createReducer 接收两个参数，第一个是状态，第二个是一个对象，用于描述如何对状态进行更新。我们可以为不同的事件定义不同的更新函数。
效果
ngrx-effects 库是用于处理副作用的库，在 ngrx-demo-core 中也得到了完美支持。现在，我们将学习如何在 ngrx-demo-core 中使用 effects。
初始化效果
第一个要做的就是初始化效果，这个效果应该在我们的应用程序启动时运行。下面是一个初始化效果的例子：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----- - ---- --------------
------ - -------- ------------- ------ - ---- ----------------
------ - -- - ---- -------
------ - --------- - ---- -----------------
------ - -------- - ---- --------------
-------------
------ ----- ---------- -
----- - --------------- --
-------------------
------------- -------
------------ --
----
----- ------ ---- ---------
--
-
-
--
------------------- ------ ----------- ------- --------- -------- --
-在这个例子中，我们定义了一个 init 效果，这个效果应该在我们的应用程序启动时运行。在 init 效果中，我们使用 ofType 运算符来指定我们要匹配的事件类型。在这里，我们要匹配的事件类型是 [App] Init。如果没有这样的事件发生，则 switchMap 操作符将不会触发。同时，我们在 switchMap 中返回了一个 of 操作符，用于生成一个新的事件，该事件的类型是 [App] Init Success。你可以在你的应用程序中派发这个事件，告诉 ngrx-demo-core 库初始化已经完成了。
处理事件
下一个要做的就是处理其他事件了。我们可以创建一个效果，在该效果中根据不同的事件类型进行不同的操作。下面是一个处理 Login 和 Logout 事件的例子：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----- - ---- --------------
------ - -------- ------------- ------ - ---- ----------------
------ - -- - ---- -------
------ - --------- - ---- -----------------
------ - -------- - ---- --------------
-------------
------ ----- ---------- -
------ - --------------- --
-------------------
------------- --------
------------ --
----
----- ------ ----- ---------
--
-
-
--
------- - --------------- --
-------------------
------------- ---------
------------ --
----
----- ------ ------ ---------
--
-
-
--
------------------- ------ ----------- ------- --------- -------- --
-在这个例子中，我们定义了两个效果：login$ 和 logout$。我们使用 ofType 运算符来选择要处理的事件类型，并在 switchMap 中定义了要返回的新事件类型。对于 login$ 效果，我们触发了另一个事件 [App] Login Success。对于 logout$ 效果，我们触发另一个事件 [App] Logout Success。你可以使用 dispatch 函数来派发这些事件，然后使用 reducer 函数更新状态。
总结
通过使用 ngrx-demo-core 的状态管理和效果功能，我们可以更高效地编写 Angular 应用程序。在这篇文章中，我们学习了如何使用 ngrx-demo-core 库来管理状态和效果，以及如何更新状态和处理事件。现在，你可以开始使用 ngrx-demo-core 库来优化自己的应用程序。在学习的过程中，你需要注意以下几点：
- 状态是重要的，状态定义了你的应用程序中的数据。
- 状态选择器用于选择状态中的一部分数据。
- reducer 函数定义了如何更新状态。
ngrx-effects是处理副作用的一种流行方式。- 初始化效果应该在应用程序启动时运行。
- 处理事件的效果可以在不同的条目类型之间进行选择。
希望这篇文章能够帮助你使用 ngrx-demo-core 库开发更好的 Angular 应用程序。如果你有任何问题或建议，请随时在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556dc81e8991b448d3b67