随着前端技术的不断发展，越来越多的 web 应用变得复杂起来。这时候，一个好的状态管理库就变得尤为重要。ngrx 是一个流行的状态管理库，它提供了一种可预测的、可维护的架构来管理应用程序的状态。
在本文中，我们将介绍如何在 Angular 应用程序中使用 ngrx。
安装和设置
首先，我们需要安装 ngrx 库。可以通过以下命令在 Angular 项目中安装：
--- ------- ----------- ------
安装完成后，我们需要在 app.module.ts 中导入 StoreModule：
------ - ----------- - ---- --------------
-----------
-------- -
-----------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -在这个例子中，我们传递了一个空对象作为参数，但是在实际应用中，我们需要传递一个包含应用程序状态的对象。
创建状态
接下来，我们需要创建应用程序的状态。在 ngrx 中，状态是一个纯对象，它描述了应用程序的所有数据。
我们可以通过创建一个 app.state.ts 文件来定义应用程序的状态：
------ --------- -------- - -------- ------- -
在这个例子中，我们定义了一个 counter 属性来存储计数器的值。
创建操作
接下来，我们需要创建一些操作来更改应用程序的状态。在 ngrx 中，操作是一个纯对象，它描述了应用程序状态的更改。
我们可以通过创建一个 counter.actions.ts 文件来定义操作：
------ - ------------ - ---- -------------- ------ ----- --------- - ----------------------- ------------ ------ ----- --------- - ----------------------- ------------ ------ ----- ----- - ----------------------- --------
在这个例子中，我们定义了三个操作：increment、decrement 和 reset。每个操作都是一个纯函数，它接受当前状态和操作参数，并返回一个新的状态。
创建 reducer
接下来，我们需要创建一个 reducer 来处理操作并更新应用程序的状态。在 ngrx 中，reducer 是一个纯函数，它接受当前状态和操作，并返回一个新的状态。
我们可以通过创建一个 counter.reducer.ts 文件来定义 reducer：
------ - -------------- -- - ---- -------------- ------ - ---------- ---------- ----- - ---- -------------------- ------ ----- ------------ - - -------- - -- ----- --------------- - -------------- ------------- ------------- ----- -- -- -------- ------------- - - ---- ------------- ----- -- -- -------- ------------- - - ---- --------- ----- -- -- -------- - --- -- ------ -------- --------------------- ------- - ------ ---------------------- -------- -
在这个例子中，我们定义了一个初始状态，并使用 createReducer 函数创建了一个 reducer。createReducer 函数接受初始状态和一组操作处理函数，并返回一个新的 reducer。
在操作处理函数中，我们使用 on 函数来监听操作，并返回一个新的状态。
注册 reducer
最后，我们需要将 reducer 注册到应用程序中。我们可以通过在 app.module.ts 中导入 StoreModule 并调用 forFeature 方法来注册 reducer：
------ - ----------- - ---- --------------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------------------------- ---------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -在这个例子中，我们将 counterReducer 注册到了 counter 特性中。
使用状态
现在，我们已经完成了 ngrx 的设置，并可以在组件中使用应用程序的状态了。我们可以通过 select 方法来选择应用程序的状态，并使用 dispatch 方法来分发操作。
以下是一个示例组件：
------ - --------- - ---- ----------------
------ - ------ ------ - ---- --------------
------ - -------- - ---- --------------
------ - ---------- ---------- ----- - ---- --------------------
------------
--------- --------------
--------- -
------------ -- -------- - ----- -------
------- ----------------------------------------
------- ----------------------------------------
------- --------------------------------
-
--
------ ----- ---------------- -
-------- - -----------------------------------
------------------- ------ ---------------- --
----------- -
---------------------------------
-
----------- -
---------------------------------
-
------- -
-----------------------------
-
-在这个例子中，我们使用 select 方法选择了 counter 特性的状态，并使用 async 管道将其转换为可观察对象。我们还分别为 increment、decrement 和 reset 操作创建了按钮，并在点击时分发操作。
结论
在本文中，我们介绍了如何在 Angular 应用程序中使用 ngrx 库。我们讨论了如何创建应用程序的状态、操作和 reducer，并将其注册到应用程序中。最后，我们还展示了如何在组件中使用应用程序的状态。
ngrx 提供了一种可预测的、可维护的架构来管理应用程序的状态。它可以帮助我们更好地组织和维护代码，并提高应用程序的可靠性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673aa15639d6d08e88af0da5