在前端开发中，我们经常需要管理数据的状态和逻辑，以便于展现和交互。而 ngrx 库则是 Angular 中一个强大且流行的数据管理工具。它提供了一个基于 Redux 设计模式的可预测的状态管理方案，支持 RxJS 响应式编程范式。在 ngrx 库中，基本的概念包括 action、reducer 和 store。但是，当我们的 Angular 应用中存在多个 module，从而引入多个 store 时，这些 store 的初始化、访问和管理都会变得麻烦和重复。于是，我们有了一个 npm 包 ngrx-registry 可以简化这些流程。下面，我们来学习一下如何使用它。
安装
首先，我们要在项目中引入该 npm 包。在控制台中输入以下命令：
npm install ngrx-registry
使用
引入和注册
首先，我们需要在应用的主模块 app.module.ts 中引入和注册 ngrx-registry。为了方便，我们同样将 StoreModule.forRoot 方法和 EffectsModule.forRoot 方法中的注册过程也移动到 central-store.ts 中。这样，可以更加清晰地分离 store 的内容和 store 的管理。
下面是 central-store.ts 的基本代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - --------------- - ---- ---------------------
-----------
-------- -
-------------
------------------------
--------------------------
--
---------- -
----------------
-
--
------ ----- ------------ -
------------------- ---------------- ----------------------- - -
-其中，我们需要定义一个名为 registryReducer 的 reducer，来负责处理 store 的状态更新。这个 reducer 工作类似于下面的示例代码：
-- -------------------- ---- -------
------ - ------ - ---- --------------
------ - --------------- - ---- --------------------
------ --------- ------------- -
------ -------
-
----- ------------- ------------- - -
------ --
--
------ -------- --------------------- - ------------- ------- -------- ------------- -
------ ------------- -
---- -------------------------
------ -
---------
------ ----------- - --
--
---- -------------------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-其中，我们的 RegistryActions 枚举类需要定义好各种 action 的类型，以供 reducer 使用。
其它模块中 store 的注册
有了 central-store.ts，我们就可以在其它 module 中注册 store，并将 store 的状态更新工作交给 registryReducer 来完成。
以 login.module.ts 为例，我们在其 @NgModule 的 imports 中引入 central-store.ts，即可使用其定义好的 registryReducer。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------ - -------------- - ---- --------------------
------ - ------------ - ---- -------------------------
-----------
-------- -
-------------
------------------------ ----- --- ---------- -------------- ----
------------
-------------
--
------------- ----------------
--
------ ----- ----------- - -注册 store 后的使用
在完成以上的注册过程后，我们就可以在其它组件中使用 store 来管理数据的状态和逻辑了。下面是一个简单的示例代码，它也使用了 ngrx/effects 中的 Actions 服务，并利用 registry$ 的状态变化来更新组件的视图。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - ------ - ---- -----------------
------ - ------- - ---- ----------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- ----------------------------
------------
--------- ------------
------------ -------------------------
---------- --------------------------
--
------ ----- -------------- ---------- ------ -
---------- -------------------
------------
------- ------ ---------------------
------- --------- --------
- - -
---------- -
-------------- - ------------------------------
-------------
------------------- -- ----------- --- --------------------------
------------- -- --------------- -------- ------ --- ---------------
-
----------- ---- -
--------------------- ----- ------------------------ ---
-
----------- ---- -
--------------------- ----- ------------------------ ---
-
-这样，我们就成功完成了 ngrx-registry 库的使用过程。我们可以将这个过程调整到更复杂的业务场景中去，以便更好地利用该库来优化我们的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554781e8991b448d27c2