简介
在一个 Angular 程序中，数据是非常重要的。在前端页面中，数据是用来填充页面的动态内容。在一个典型的 Angular 应用中，需要管理各种各样的不同类型的数据。为了管理 Angular 应用中的数据，我们可以使用 Ngrx 库，这是一个优秀的 Redux 模式的 Angular 实现。使用 Ngrx 库可以帮助我们管理 Angular 应用中的状态，提供更好的应用程序性能和更好的代码组织性。
在本文中，我们将介绍如何在 Angular 应用中使用 Ngrx 库管理应用程序数据的最佳实践。我们将首先介绍 Ngrx 库的主要概念和功能。结果，我们将介绍如何重构旧的应用程序以充分利用 Ngrx 库，并最终演示如何使用 Ngrx 库从头构建新的应用程序。
Ngrx 库的主要概念和功能
Ngrx 库是建立在 Redux 模式之上的 Angular 应用。Redux 模式是一种可预测的状态管理模式，已被证明非常适合于大规模应用程序。Redux 模式中有三个基本的对象：状态，操作和 Action。
状态
状态是应用程序的数据。在 Redux 中，状态存储在一个单一的 JavaScript 对象中。在 Ngrx 库中，状态存储在一个 RxJS 可观测序列中。这个序列可以被订阅从而观察状态的变化。
操作
操作是改变状态的一种方式。在 Redux 中，操作是一个纯的函数，它采用当前状态和一个操作参数，计算新的状态并返回。在 Ngrx 库中，操作是一个纯的函数，它采用当前状态和操作参数，计算新的状态并返回。这个函数没有副作用，也不需要处理异步操作。
动作
动作是传达关于如何更改状态的信息。在 Redux 中，动作是一个纯 JavaScript 对象，由一个类型字段和可选负载组成。在 Ngrx 库中，动作是一个纯 JavaScript 对象，其中包括一个类型字段和一个可选负载。当操作执行时，它会生成一个动作。这个动作会被发送到 Ngrx 库的应用程序状态中。
旧应用程序的重构
如果你已经有一个现成的 Angular 应用程序，你可以通过重构该程序来利用 Ngrx 库的优势。下面是一些重构步骤：
- 将应用程序中的所有状态放入单一的状态存储对象中。所有状态都应该位于一个名为 appState 的对象中。这个对象应该是一个可观察序列，以便在状态发生变化时与组件同步。
------ --------- -------- -
------ ------------
----- -----
-
----- ------------- -------- - -
------ ---
----- ---------
-
----- -------- - --- ----------------------------------------
-------------
------ ----- --------------- -
------- -------------------- - ------------------------
------------- --------- -
------------------------
-
-- 创建一个操作对象和一些操作的纯函数。操作应该采用当前状态和操作参数，并计算新状态。使用 redux-observable 库，你将能够为你的操作添加异步行为。
------ ----- ------- - -------------------- ----- ------- ----- ------ ------
------ ----- -------------- - -------------------- --- --------- ------- ----- ---- ------
------ ----- ---------- - -------------------- -------- ------- --- ------ ------
------ -------- ------------------ ------- -
------ ------------- -
---- ----- --- ---------
------ -
---------
------ ---------------- ------------
--
---- ----- --------
------ -
---------
------ ----------------------- -- ------- --- ----------
--
--------
------ ------
-
-
-------------
------ ----- ----------- -
------------
------- ---------------- ----------------
------- ----- ----------
- --
--------- ------- -
----- -- - ----------
----- ---- - -
---
-----
---------- -----
--
---------------------------- ----------------
----- -- -
------------------------------------------------------------ ---------------- ----- --- -----
-
--
-
---------- ------- -
-----------------------------------------------
-- -- -
------------------------------------------------------------ ------------------- -- -----
-
--
-
-- 创建一个组件，它可以通过订阅状态或调度操作来响应状态变化。
------------
--------- -----------
--------- -
------ ------------------ ------------
------- ----------------------- -------------
----
--- ----------- ---- -- -------
-- --------- --
------- --------------------------------------
-----
-----
-
--
------ ----- ------------- -
------ ------------
------------
------- ---------------- ----------------
------- ------------ -----------
- -
---------------------------------
--------- -- -------------
-----------------------
------------------------
------------------- -- -
---------- - ------
---
-
--------- -
--------------------------------
--------- - ---
-
------------ -
---------------------------------
-
------------- -
---------------------
-
-使用 Ngrx 库从头构建新的应用程序
如果你要从头开始构建一个新的 Angular 应用程序，下面是一些步骤，可以帮助你充分利用 Ngrx 库的优势：
- 创建一个包含所有应用程序状态的单一状态存储对象。状态应该位于一个名为 AppState 的对象中，应该是一个可观察的序列，以便在状态变化时与组件同步。
------ --------- -------- -
------ ------------
----- -----
-
----- ------------- -------- - -
------ ---
----- ---------
-
----- -------- - --- ----------------------------------------
-------------
------ ----- --------------- -
------- -------------------- - ------------------------
------------- --------- -
------------------------
-
-- 创建操作以改变状态，并在需要时将它们添加到操作组件中。你可以使用 @ngrx/effects 添加异步行为，例如调用 Web 服务或访问浏览器存储。
------ ----- ------- - -------------------- ----- ------- ----- ------ ------
------ ----- -------------- - -------------------- --- --------- ------- ----- ---- ------
------ ----- ---------- - -------------------- -------- ------- --- ------ ------
------ ----- -------- - -------------------- -------
------ ----- --------------- - -------------------- ---- --------- ------- ------ ----------- ------
-------------
------ ----- ----------- -
------------
------- --------- --------
------- ---------------- ----------------
------- ----- ----------
- --
--------- - --------------- --
-------------------
-----------------
------------ --
---------------------------------
---------- ----------- --
----------------- ------ ------------ -- -- ------- --- ------- --- --
--
------------- -- ---- ----- ------- ---- ---- ------ ---
-
-
-
--
-------- - --------------- --
-------------------
----------------
--------------- --
---------------------------- - ---------- --- --------- --------
--------- --
---------------- ----- - ------------ --- ------ - --
--
------------- -- ---- ----- ------ ---- --- ------ ---
-
-
-
--
----------- - --------------- --
-------------------
-------------------
--------------- --
-------------------------------------------------
------ --
------------------- --- --------- --
--
------------- -- ---- ----- ------ ---- ------ ------ ---
-
-
-
--
-- 创建一个应用程序的组件。你应该将组件与状态和操作连接起来，以便在状态变化时和操作发生时更新状态。
------------
--------- -----------
--------- -
------ ------------------ ------------
------- ----------------------- -------------
----
--- ----------- ---- -- -------
-- --------- --
------- --------------------------------------
-----
-----
-
--
------ ----- ------------- -
------ ------------
------------
------- ------ ---------------
- -
----------------
------------ -- -------------
------------------------
------------------- -- -
---------- - ------
---
--------------------------------
-
--------- -
----------------------------- ----- --------- ----
--------- - ---
-
------------ -
-------------------------------- --- ------- ----
-
------------- -
---------------------
-
-结论
使用 Ngrx 库是管理 Angular 应用程序数据的最佳实践。在本文中，我们介绍了 Ngrx 库的主要概念和功能，并展示了如何重构旧的应用程序以充分利用 Ngrx 库。我们还演示了使用 Ngrx 库从头构建 Angular 应用程序的步骤。当应用程序变得复杂时，使用 Ngrx 库是管理数据的必要工具之一，可以帮助我们提高应用程序性能，提高代码组织性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6709e7ddd91dce0dc87ce94f