什么是 Ngrx？
Ngrx 是一个基于 Redux 架构的状态管理库，用于 Angular 应用程序的状态管理。它提供了一个集中式的存储，用于存储应用程序的状态，并通过不可变的方式更新状态。Ngrx 还提供了一些强大的工具，用于简化状态管理和异步操作。
为什么需要 Ngrx？
在大型应用程序中，随着应用程序的复杂性增加，管理状态变得越来越困难。Ngrx 提供了一种可预测的状态管理方法，使得在应用程序中管理状态变得更加容易。它还提供了一些强大的工具，如 Redux DevTools，可帮助开发人员更好地理解应用程序的状态。
如何在 Angular 中使用 Ngrx？
在 Angular 中使用 Ngrx，需要遵循以下步骤：
步骤 1：安装 Ngrx
要使用 Ngrx，需要在项目中安装 @ngrx/store 和 @ngrx/effects。可以使用以下命令安装这些依赖项：
npm install @ngrx/store @ngrx/effects --save
步骤 2：创建 store
在 Angular 中，可以使用 @ngrx/store 创建一个 store。可以通过以下方式创建一个 store：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ------- - ---- -------------
-----------
-------- -
--------------------- --------- ------- --
-
--
------ ----- --------- - -步骤 3：创建 reducer
Reducer 是一个纯函数，它接收当前状态和一个操作，返回一个新的状态。可以使用 @ngrx/store 中的 createReducer 函数创建 reducer。以下是一个 reducer 的示例：
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - ---------- --------- - ---- -------------------- ------ ----- ------------ - -- ----- --------------- - -------------- ------------- ------------- ----- -- ----- - --- ------------- ----- -- ----- - -- -- ------ -------- --------------------- ------- - ------ ---------------------- -------- -
步骤 4：创建 actions
Actions 是一个简单的对象，用于描述应用程序中发生的事件。可以使用 @ngrx/store 中的 createAction 函数创建 actions。以下是一个 action 的示例：
import { createAction } from '@ngrx/store';
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');步骤 5：创建 effects
Effects 是一个可观察的对象，用于处理异步操作。可以使用 @ngrx/effects 中的 createEffect 函数创建 effects。以下是一个 effect 的示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - -- - ---- -------
------ - ---- --------- ---------- - ---- -----------------
------ - ----------- - ---- ---------------------------
------ - ---------- ----------------- ---------------- - ---- -----------------
-------------
------ ----- ----------- -
---------- - --------------- --
-------------------
------------------
----------- --
---------------------------------
--------- -- ------------------ ----- ----
---------------- -- --------------------- ----- ----
-
-
-
--
------------
------- --------- --------
------- ------------ -----------
- --
-步骤 6：使用 store
在 Angular 中，可以使用 @ngrx/store 中的 select 函数从 store 中获取状态。以下是一个使用 select 函数的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - ---------- --------- - ---- --------------------
------------
--------- --------------
--------- -
------- ----------------------------------------
------------ ------ -- ------ - ----- --------
------- ----------------------------------------
-
--
------ ----- ---------------- -
------ - ------------------------------------
------------------- ------ ----------- --
----------- -
---------------------------------
-
----------- -
---------------------------------
-
-总结
Ngrx 是一个强大的状态管理库，用于 Angular 应用程序的状态管理。它提供了一个可预测的状态管理方法，使得在应用程序中管理状态变得更加容易。通过遵循上述步骤，可以在 Angular 中使用 Ngrx。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6567675fd2f5e1655d03ba9c