什么是 Ngrx
Ngrx 是一个基于 Redux 的状态管理库，它提供了一种在 Angular 应用中管理状态的方式。它可以帮助我们在 Angular 应用中更好地组织和管理状态，并且可以提高应用的性能。
如何使用 Ngrx
安装依赖
首先，我们需要安装 Ngrx 相关的依赖。在命令行中输入以下命令：
npm install @ngrx/store @ngrx/effects @ngrx/store-devtools --save
创建 Store
在 Angular 中，我们可以使用 @ngrx/store 中的 createStore 方法来创建一个 Store。在 app.module.ts 中，我们需要导入 StoreModule 并使用 forRoot 方法来创建 Store。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - -------- - ---- -------------
-----------
-------- -
--------------
-----------------------------
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们导入了 reducers，它是一个纯函数，用于处理应用程序的状态。我们将在下一节中详细讨论它。
创建 Reducer
在 Ngrx 中，Reducer 负责处理状态的变化。Reducer 是一个纯函数，它接收当前的状态和一个 Action，并返回一个新的状态。
我们可以使用 @ngrx/store 中的 createReducer 方法来创建一个 Reducer。在 reducers.ts 中，我们可以定义我们的 Reducer。
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - ---------- ---------- ----- - ---- -------------------- ------ ----- ------------ - -- ------ ----- -------------- - -------------- ------------- ------------- ----- -- ----- - --- ------------- ----- -- ----- - --- --------- ----- -- -- --
在上面的代码中，我们定义了一个名为 counterReducer 的 Reducer。它有一个初始状态为 0，并且可以处理三个不同的 Action：increment、decrement 和 reset。
创建 Action
在 Ngrx 中，Action 是一个简单的对象，它描述了状态的变化。我们可以使用 @ngrx/store 中的 createAction 方法来创建一个 Action。
在 counter.actions.ts 中，我们可以定义我们的 Action。
import { createAction } from '@ngrx/store';
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');在上面的代码中，我们定义了三个不同的 Action：increment、decrement 和 reset。
创建 Effects
在 Ngrx 中，Effect 可以用于处理异步操作。我们可以使用 @ngrx/effects 中的 createEffect 方法来创建一个 Effect。
在 counter.effects.ts 中，我们可以定义我们的 Effect。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - -- - ---- -------
------ - ---- --------- ---------- - ---- -----------------
------ - -------------- - ---- --------------------
------ - ------------ ------------------- ------------------ - ---- --------------------
-------------
------ ----- -------------- -
------------ - --------------- --
-------------------
--------------------
----------- --
--------------------------------------
----------- -- -------------------- ------- ----
---------------- -- ----------------------- ----- ----
-
-
-
--
------------
------- --------- --------
------- --------------- --------------
- --
-在上面的代码中，我们定义了一个名为 loadCounter$ 的 Effect。它使用 CounterService 中的 getCounter 方法来获取计数器的值，并根据结果发出一个成功或失败的 Action。
创建 Service
在上面的代码中，我们使用了 CounterService 来获取计数器的值。在 counter.service.ts 中，我们可以定义我们的 Service。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- -- - ---- -------
-------------
----------- ------
--
------ ----- -------------- -
------------- ------------------ -
------ -------
-
-在上面的代码中，我们定义了一个名为 CounterService 的 Service。它有一个名为 getCounter 的方法，用于获取计数器的值。
在组件中使用 Store
在我们的应用程序中，我们可以使用 @ngrx/store 中的 select 方法来选择我们的状态，并使用 dispatch 方法来发出 Action。
在 counter.component.ts 中，我们可以定义我们的组件。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - -------- - ---- --------------
------ - ---------- ---------- ------ ----------- - ---- --------------------
------ - ------------- - ---- ----------------------
------------
--------- --------------
--------- -
------------ ------ -- -------- - ----- --------
------- ----------------------------------------
------- ----------------------------------------
------- --------------------------------
------- ---------------------------- ----------------
-
--
------ ----- ---------------- -
--------- -------------------
------------------- ------ ---------------- -
------------- - ----------------------------
-
----------- -
---------------------------------
-
----------- -
---------------------------------
-
------- -
-----------------------------
-
------------- -
-----------------------------------
-
-在上面的代码中，我们定义了一个名为 CounterComponent 的组件。它使用 select 方法来选择我们的状态，并使用 dispatch 方法来发出 Action。
总结
在本文中，我们介绍了如何在 Angular 应用中使用 Ngrx。我们学习了如何创建 Store、Reducer、Action、Effect 和 Service，并在组件中使用 Store。希望这篇文章对你学习和理解 Ngrx 有所帮助。
示例代码
示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65824495d2f5e1655dd69f72