介绍
在 Angular 单页应用（SPA）中，当应用规模变得越来越大时，状态管理会变得越来越困难。Angular 中的状态管理通常使用 NgRx 库（一个基于 Redux 的 State 管理库）来解决这个问题。但是，当应用程序需要分布式状态管理时，情况会变得更加复杂。
在分布式状态管理中，状态分散在多个服务器/客户端之间。当这些客户端/服务器之间需要共享数据时，需要在其中一个客户端/服务器上添加更改，而其他客户端/服务器需要相应地更新它们的状态。
在本文中，我们将讨论如何在 Angular 应用程序中实现分布式状态管理，以便我们可以在多个客户端/服务器之间共享状态。
使用 Angular Universal
要在 Angular 应用程序中实现分布式状态管理，我们需要使用 Angular Universal。Angular Universal 是一个 Angular 库，它允许我们将应用程序渲染为服务器端渲染（SSR）并在服务器上运行 Node.js，使服务器能够向所有客户端提供相同的状态。
下面是一个示例：
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ------------------- - ---- -----------------------
------ - ----------- - ---- ------------------------------
------ - ---------- - ---- -------------------
-----------
------------- ---------------
-------- -
------------------------------------ ------ -------- ---
------------------------- -------------
--------------------------
---------------------- - -- - ---------------------------------
--
---------- ---------------
--
------ ----- --------- --在这个示例中，我们使用 withServerTransition 方法让应用程序在客户端和服务器上都运行。我们还使用 StoreModule.forRoot() 来将 Angular 应用程序连接到 ngrx 库（用于状态管理），并将 appReducer 作为我们的应用程序状态的默认 reducer。
接下来，我们需要在服务器端（例如使用 Express.js）上运行 SSR：
-- -------------------- ---- -------
-- ---------
------ -------------------------
------ - -- ------- ---- ----------
------ - --------------- - ---- ------------------------------
------ - -- ---------- ---- --------------
------ - -- ---- ---- -------
----- --- - ----------
-- --- --- ------
-----------
-------
-----------------
---------- ----------------
--
--
-- --- --- ----- ------
---------------- -------------------- ---------
-- --- --- ---- ------
------------- -------- --------
-- --- --- ------ ------
------------------------------------------- ----------
------------- ----- ---- -- -
-- ------ --- ---- ----- --- --------- ------
------------------- - --- ---
---
-- --- ----
----- ---- - ---------------- -- -----
-- ----- --- ------
---------------- -- -- -
------------------- ------- -- ---- ----------
---在服务器上运行 SSR 时，我们需要使用 ngExpressEngine 来将应用程序渲染为 HTML。我们还需要使用 body-parser 中间件解析 POST 请求的 JSON 数据。
现在，我们的 Angular 应用程序已经可以在服务器上渲染，我们需要在应用程序中添加路由来使用这个服务器。
-- -------------------- ---- -------
-- ---------------------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ------------------- - ---- -----------------------
------ - ----------- - ---- ------------------------------
------ - ---------- - ---- -------------------
----- ------- ------ - -
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- --
- ----- ----- ----------- -- --
--
-----------
-------- -
---------------------------- - ------------------ --------- ---
--------------------- ---- ---------- ---
--------------------------
---------------------- - -- - ---------------------------------
--
-------- ---------------
--
------ ----- ---------------- --在这个示例中，我们使用 RouterModule.forRoot() 为我们的应用程序设置路由，并像之前一样使用 StoreModule.forRoot() 连接到 ngrx 库。
现在，我们的应用程序已经准备好在客户端和服务器上运行，并且可以使用相同的状态。
结论
在 Angular 单页应用（SPA）中实现分布式状态管理可能看起来非常困难，但使用 Angular Universal，我们可以轻松地将应用程序渲染为服务器端渲染（SSR），并在服务器上运行 Node.js。这样，我们就可以使用相同的状态在多个客户端/服务器之间共享数据。
这个示例只是简单介绍了分布式状态管理的基本概念。在更大的应用程序中，将需要更多的状态，更复杂的路由配置，更实用的库（如 NgRx）等，以便您可以更好地跟踪和管理状态。
希望本文对你有所帮助，如果有任何问题或疑问，请随时提出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677275006d66e0f9aad962ee