在 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。在终端中，执行以下命令：
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools --save
这个命令会安装 Ngrx 的一些核心模块，包括 store、effects、entity 和 store-devtools。
创建 State
接下来，我们需要创建一个 State。在 src/app 目录下创建一个 todo 目录，并在该目录下创建一个 todo.state.ts 文件。在这个文件中，我们定义了一个 TodoState 类，它包含了一个 todoList 属性，这个属性用来存储 TODO 列表的数据。
import { Todo } from '../models/todo.model';
export class 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 属性，并返回这个属性。
import { createSelector } from '@ngrx/store';
import { TodoState } from './todo.state';
export const selectTodoList = createSelector(
(state: { todo: TodoState }) => state.todo,
(todoState: TodoState) => todoState.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