前言
在构建现代 Web 应用程序时，状态管理是一个非常重要的方面。 在 Angular 应用程序中，我们可以使用 Ngrx 库来实现状态管理。 Ngrx 是一个基于 Redux 架构的状态管理库，它提供了一些帮助我们管理应用程序状态的工具和技术。
在本文中，我们将介绍如何在 Angular 应用程序中使用 Ngrx 进行状态管理。 我们将涵盖以下主题：
- 简介：Ngrx 是什么，为什么要使用它？
- 安装和设置：如何安装 Ngrx 库并设置我们的应用程序。
- 构建状态：如何构建我们的应用程序的状态，并在应用程序中使用它。
- 组合 reducers：如何组合多个 reducer，并在应用程序中使用它。
- 使用 selectors：如何使用 selectors 从状态中获取数据。
- 使用 effects：如何使用 effects 处理异步操作。
简介
Ngrx 是一个基于 Redux 架构的状态管理库。 Redux 是一种流行的状态管理库，它提供了一个单一的可预测的状态容器，用于管理应用程序的状态。 Ngrx 架构的核心概念是 store，它是一个全局状态容器，用于存储应用程序的状态。
Ngrx 库提供了一些帮助我们管理应用程序状态的工具和技术，包括 reducer、action、selector 和 effect。 在接下来的章节中，我们将深入了解这些概念，并学习如何在 Angular 应用程序中使用它们。
安装和设置
要在 Angular 应用程序中使用 Ngrx，我们需要安装以下 NPM 包：
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools --save
安装完成后，我们需要在应用程序的 AppModule 中导入 StoreModule 和 EffectsModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
------------------------
-------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们将 StoreModule 和 EffectsModule 导入到 AppModule 中，并使用 forRoot() 方法将它们设置为全局引用。 我们还定义了一个空的 reducer 和一个空的 effect。
构建状态
在 Ngrx 应用程序中，我们使用 reducer 来定义应用程序的状态。 reducer 是一个纯函数，它接收当前状态和一个 action，然后返回一个新的状态。
我们可以使用 @ngrx/entity 库来构建我们的状态。 @ngrx/entity 提供了一些帮助我们管理实体状态的工具和技术。
我们可以定义一个 EntityAdapter，用于管理实体状态：
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
import { Product } from './product.model';
export const adapter: EntityAdapter<Product> = createEntityAdapter<Product>();
export interface State extends EntityState<Product> {}
export const initialState: State = adapter.getInitialState();在上面的代码中，我们定义了一个 EntityAdapter，用于管理 Product 实体的状态。 我们还定义了一个 State 接口，它扩展了 EntityState<product> 接口，并定义了一个 initialState，它使用 getInitialState() 方法从 adapter 中获取。
接下来，我们可以定义一个 reducer，用于处理 action 并更新状态：
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - ----------- - ---- --------------- ------ - ------- - ---- ------------------ ------ - -------------- - ---- -------------------- ------ - ------- - ---- -------------------- ------ --------- ----- ------- -------------------- -- ------ ----- ------------- ----- - -------------------------- ------ ----- ------- - -------------- ------------- -------------------------------------- ------- - -------- -- -- ------------------------ -------- ------------------------------------ ------- - ------- -- -- ----------------------- -------- --------------------------------------- ------- - ------- -- -- ------------------- --- ----------- -------- ------- -- -------- --------------------------------------- ------- - -- -- -- --------------------- ------- --
在上面的代码中，我们定义了一个 reducer，它使用 createReducer() 方法创建。 我们还定义了一些处理不同 action 的 on() 方法。 这些方法使用 adapter 上的方法来更新状态。
现在，我们已经定义了我们的状态和 reducer，接下来我们需要在应用程序中使用它们。
组合 reducers
在应用程序中，我们可能需要定义多个 reducer 来管理不同的状态。 我们可以使用 combineReducers() 方法将多个 reducer 组合成一个 reducer。
我们可以在 AppModule 中使用 combineReducers() 方法来组合 reducer：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ --------------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------- -- -------------- - ---- --------------------
-----------
-------- -
--------------
--------------------- --------- -------------- ---
-------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们使用 combineReducers() 方法将 productReducer 组合成一个 reducer，并将它们设置为全局引用。 我们还定义了一个 products 属性，它是我们应用程序状态的一部分。
现在，我们已经定义了我们的状态和 reducer，并组合了多个 reducer，接下来我们需要学习如何使用 selectors。
使用 selectors
在 Ngrx 应用程序中，我们使用 selectors 来从状态中获取数据。 selectors 是一个纯函数，它接收状态作为参数，并返回从状态中获取的数据。
我们可以使用 createSelector() 方法来创建 selectors：
import { createSelector } from '@ngrx/store';
import { selectAll } from './product.adapter';
export const selectProducts = createSelector(
(state: any) => state.products,
selectAll
);在上面的代码中，我们定义了一个 selectProducts selector，它使用 createSelector() 方法创建。 我们还使用一个 selectAll 方法从 adapter 中获取所有实体。
现在，我们已经定义了我们的状态和 reducer，并组合了多个 reducer，并且学习了如何使用 selectors，接下来我们需要学习如何使用 effects。
使用 effects
在 Ngrx 应用程序中，我们使用 effects 来处理异步操作。 effects 是一个纯函数，它接收一个 action 流，并返回一个新的 action 流。
我们可以使用 @ngrx/effects 库来创建 effects。 我们需要定义一个 Effect 类，并使用 @Effect() 装饰器将其注册为一个 effect。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - ---------- --- - ---- -----------------
------ - -------------- - ---- --------------------
------ - -------------- - ---- --------------------
-------------
------ ----- -------------- -
------------- - --------------- -- -------------------
------------------------------------
------------ -- -----------------------------------
------------ -- ------------------------------------ -------- ---
---
----------- - --------------- -- -------------------
----------------------------------
------------ ------- -- -- -----------------------------------------
----------- -- ---------------------------------- ------- ---
---
-------------- - --------------- -- -------------------
-------------------------------------
------------ ------- -- -- --------------------------------------------
----------- -- ------------------------------------- ------- ---
---
-------------- - --------------- -- -------------------
-------------------------------------
------------ -- -- -- ---------------------------------------
------ -- ------------------------------------- -- ---
---
------------
------- --------- --------
------- --------------- --------------
- --
-在上面的代码中，我们定义了一个 ProductEffects 类，并定义了四个 effect。 每个 effect 都使用 ofType() 方法过滤 action 流，使用 switchMap() 方法处理异步操作，并使用 map() 方法返回新的 action。
现在，我们已经学习了如何使用 Ngrx 进行状态管理，并学习了如何使用 reducer、selector 和 effect。
示例代码
以下是一个简单的示例代码，它演示了如何在 Angular 应用程序中使用 Ngrx 进行状态管理：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---------- - ---- -------
------ - ------- - ---- ------------------
------ - -------------- - ---- --------------------
------ - -------------- - ---- ----------------------
------------
--------- -----------
--------- -
----
--- ----------- ------- -- --------- - --------- ------------ -------
-----
----- --------------------------
------ ------------------ ----------- -------------------
------- ----------------- ----------------
-------
-
--
------ ----- ------------ -
---------- ----------------------
----- -------
------------------- ------ ----------- -
-------------- - ----------------------------------------
-
------------ -
----------------------------------------------- -------- - ----- --------- - ----
--------- - ---
-
-在上面的代码中，我们定义了一个 AppComponent，它使用 select() 方法从状态中获取数据，并使用 dispatch() 方法发送 action。 我们还定义了一个简单的表单，用于添加新产品。
结论
在本文中，我们介绍了如何在 Angular 应用程序中使用 Ngrx 进行状态管理。 我们学习了如何构建状态、组合 reducer、使用 selector 和 effect。 我们还提供了一个简单的示例代码，演示了如何在应用程序中使用 Ngrx。 通过使用 Ngrx，我们可以更好地管理应用程序的状态，并使我们的应用程序更具可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673f357e5ade33eb722e9136