什么是 ngRx
ngRx 是一个基于 RxJS 的状态管理库，用于 Angular 应用程序中的状态管理。它提供了一种可预测的状态管理方式，以确保应用程序的状态始终保持一致性。
为什么需要状态管理
在大型应用程序中，组件之间的数据传递和状态管理可能会变得非常复杂。这可能会导致许多问题，例如：
- 组件之间的数据传递变得混乱和难以维护。
- 应用程序状态的管理变得困难，因为状态可能分散在多个组件中。
- 当组件之间的状态变化时，可能会出现不一致的情况。
因此，我们需要一种可预测的状态管理方式，以确保应用程序的状态始终保持一致性。这就是 ngRx 的作用。
如何使用 ngRx 进行状态管理
下面我们将演示如何在 Angular 应用程序中使用 ngRx 进行状态管理。
步骤 1：安装 ngRx
首先，我们需要安装 ngRx。可以使用以下命令：
npm install @ngrx/store --save
步骤 2：创建状态
接下来，我们需要创建一个状态。状态是应用程序中所有组件共享的数据。
我们可以在 src/app/app.module.ts 中创建一个状态：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- --------------
-----------
-------- -
------------------------
--
--
------ ----- --------- - -在这里，我们导入了 StoreModule 并使用 forRoot 方法创建了一个空状态。我们可以将状态添加到这个对象中。
步骤 3：创建动作
接下来，我们需要创建一些动作。动作是用于更改状态的对象。
我们可以在 src/app/app.module.ts 中创建一个动作：
import { createAction, props } from '@ngrx/store';
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');在这里，我们使用 createAction 方法创建了三个动作：increment、decrement 和 reset。这些动作用于更改状态。
步骤 4：创建 reducer
接下来，我们需要创建一个 reducer。reducer 是用于更改状态的函数。
我们可以在 src/app/app.module.ts 中创建一个 reducer：
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - ---------- ---------- ----- - ---- -------------------- ------ ----- ------------ - -- ------ ----- -------------- - -------------- ------------- ------------- ----- -- ----- - --- ------------- ----- -- ----- - --- --------- ----- -- -- --
在这里，我们使用 createReducer 方法创建了一个 reducer。它接受一个初始状态和一些动作处理函数。当我们调用 increment 动作时，它将返回一个新的状态，它的值将增加 1。
步骤 5：将 reducer 添加到状态中
最后，我们需要将 reducer 添加到状态中。
我们可以在 src/app/app.module.ts 中添加 reducer：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- --------------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------------- ------ -------------- ---
--
--
------ ----- --------- - -在这里，我们使用 forRoot 方法将 reducer 添加到状态中。我们将 reducer 命名为 count。
步骤 6：在组件中使用状态
现在，我们已经设置了状态。让我们在组件中使用它。
我们可以在 src/app/counter/counter.component.ts 中使用状态：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - ---------- ---------- ----- - ---- ---------------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- -
------- -------------------
------------------- ------ ------- ------ ------ --- -
----------- - ----------------------
-
----------- -
---------------------------------
-
----------- -
---------------------------------
-
------- -
-----------------------------
-
-在这里，我们使用 Store 服务订阅了状态，并在 increment、decrement 和 reset 方法中分派动作。我们还在模板中使用了 count$ 变量来显示状态。
步骤 7：在模板中使用状态
最后，我们需要在模板中使用状态。
我们可以在 src/app/counter/counter.component.html 中使用状态：
<div>
<button (click)="increment()">Increment</button>
<div>{{ count$ | async }}</div>
<button (click)="decrement()">Decrement</button>
</div>
<div>
<button (click)="reset()">Reset</button>
</div>在这里，我们使用了 async 管道来订阅 count$ 变量并显示状态。
结论
ngRx 是一个非常有用的状态管理库，它可以帮助我们在 Angular 应用程序中管理状态。在本文中，我们介绍了如何使用 ngRx 进行状态管理，并提供了一些示例代码。希望这篇文章能够帮助你更好地理解 ngRx。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67657c2e76af2b9a20ed61e8