前言
在开发 Web 应用程序时，我们通常需要使用路由来管理用户在应用程序中导航的路径。然而，管理路由状态可能是一项具有挑战性的任务。@ngrx/router-store 是一个基于 Redux 架构并且为 Angular 开发者提供的开源包，它允许我们将应用程序的路由状态管理到 Redux Store 中，通过这种方式来实现更易于管理、跟踪以及调试的应用程序。
这篇文章将会介绍 @ngrx/router-store 的使用，包括如何安装、如何集成到我们的 Angular 应用程序中，以及如何处理路由状态的变化。我们还将讨论如何集成其他 @ngrx 包，如 @ngrx/store，从而创建更有组织的大型应用程序。
安装
首先，我们需要安装 @ngrx/router-store 包，以及其他一些必要的 @ngrx 包，包括 @ngrx/store 和 @ngrx/effects。我们可以使用以下命令进行安装：
npm install @ngrx/store @ngrx/effects @ngrx/router-store
集成到应用程序中
在我们的应用程序中，我们需要依次进行以下步骤：
- 导入 RouterStoreModule
- 定义我们的路由状态
- 定义我们的应用程序状态
- 将 Redux Store 注入到我们的应用程序中
- 将路由状态集成到我们的应用程序状态中
下面，我们将详细讨论每个步骤。
导入 RouterStoreModule
首先，在 app.module.ts 中，我们需要导入 RouterStoreModule：
-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------
-----------
-------- -
--------------
------------------------------
-----------------------------------
---------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -定义路由状态
然后，我们需要定义我们的路由状态。这个状态将保存在我们的 Redux Store 中，以便我们能够随时检查当前的路由状态。我们可以通过以下方式定义这个状态：
-- -------------------- ---- ------- ------ --------- -------------- - ---- ------- ------------ ------- ------- ------- --------- ------- - ------ --------- ----- - ------- ----------------------------------- -
首先，我们定义了 RouterStateUrl 接口，该接口定义路由的状态，如 url、查询参数、参数和片段等。然后，我们定义了一个名为 State 的接口，它将路由状态记录在 router 中，使用 RouterReducerState 泛型类型。
定义应用程序状态
接下来，我们需要定义我们的应用程序状态。这个状态将保存我们应用程序的所有数据。
export interface AppState {
router: RouterReducerState<RouterStateUrl>;
// other application state here
}可以看到，这个接口和我们之前定义的 State 接口非常相似。对于应用程序状态和路由状态，我们都使用了 RouterReducerState 泛型类型。
注入 Redux Store 到应用程序中
然后，我们需要将我们的 Redux Store 注入到我们的应用程序中。这可以通过 AppModule 中的以下代码完成：
-- -------------------- ---- -------
-----------
-------- -
--------------
------------------------------
-----------------------------------
---------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- -
------------------ ---------------- --
-我们可以在构造函数中注入 Store，并且我们可以看到，我们的 Store 的类型是 AppState，这是我们在之前定义的应用程序类型。
将路由状态集成到应用程序状态中
最后，我们需要将路由状态集成到我们的应用程序状态中。我们可以通过以下代码完成：
-- -------------------- ---- -------
------ - ---------------------------- ----------- - ---- ---------------------
-----------
-------- -
--------------
------------------------------
-----------------------------------
----------------------------
------------------------------------- --------- --------- ------------ ------------------- --
--
------------- ---------------
---------- --------------
--
------ ----- --------- --这将启用 Redux 插件，使我们能够轻松地调试路由状态。此外，它还将 RouterState.Minimal 注入应用程序状态中，从而使我们能够将当前路由状态轻松地访问到。
状态选择器
现在我们已经集成了路由状态到我们的应用程序状态中，我们可以轻松地使用 @ngrx/store 包提供的 createSelector 函数来创建状态选择器。这些选择器可以根据需要选择状态，从而使我们能够轻松地链接路由状态和其他状态。
-- -------------------- ---- ------- ------ - -------------- - ---- -------------- ------ - ------------------ - ---- --------------------- ------ - -- --------- ---- ---------- ------ ----- ------------ - ------- ------------------- -- ------------- ------ ----- ---------------- - --------------- ------------- -------- --------------------------------------------- -- ---------------- --
上面的代码显示了如何使用 createSelector 函数创建一个状态选择器，以选择当前路由的 URL。我们首先定义了我们要选择的路由状态，然后使用 createSelector 函数来转换该状态，以提供我们需要的值。
整合 @ngrx/effects 包
现在，我们已经了解了如何使用 @ngrx/router-store 包来管理我们应用程序的路由状态。但是，要创建一个大型的、组织良好的 Angular 应用程序还需要其他的 @ngrx 包。其中，@ngrx/effects 包可以提供一个简单的方法来管理副作用，并且支持高效的异步操作。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ------------- ------ - ---- ----------------
------ - --- - ---- -----------------
-------------
------ ----- --------- -
------------------- --------- -------- --
--------- - --------------- --
-------------------
--------------------
------ -- -- ----- -------------------- ---
-
--
-上面的代码显示了如何使用 @ngrx/effects 包来创建一个简单的副作用，并在应用程序中使用它。首先，我们在 MyEffects 类中定义了一个名为 myAction$ 的副作用，它使用 createEffect 函数来创建一个副作用。在这个例子中，我们对 Action 流中的 MY_ACTION 操作进行了监听，并在操作后调用了 MY_ACTION_COMPLETE 操作。
示例代码
下面是一个完整的示例代码，它演示了如何使用 @ngrx/router-store 包，以及如何将路由状态集成到应用程序状态中。同时，它还演示了如何使用 @ngrx/effects 包来处理副作用。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ ----- - ---- --------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ----------------
------ - ------------------ ------------ ------------------ - ---- ---------------------
------ - -------------- - ---- --------------
------ - ------ - ---- ------------------
------ --------- -------------- -
---- -------
------------ -------
------- -------
--------- -------
-
------ --------- -------- -
------- -----------------------------------
-- ----- ----------- ----- ----
-
------ -------- --------------- -------- - ---------- ------- ---- -
-- ----- -------- ----
------ ---
-
-------------
------ ----- --------- -
------------------- --------- -------- --
--------- - --------------- --
-------------------
--------------------
------ -- -- ----- -------------------- ---
-
--
-
------ ----- ------------ - ------- --------- -- -------------
------ ----- ---------------- - ---------------
-------------
-------- ----------------------------------- -- ----------------
--
-----------
------------- ---------------
-------- -
--------------
------------------------------
-----------------------------------
----------------------------
------------------------------------- --------- --------- ------------ ------------------- --
--
---------- --------------
--
------ ----- --------- -
------------------ ---------------- --
-结语
在本文中，我们介绍了如何使用 @ngrx/router-store 包来管理应用程序的路由状态。我们还讨论了如何将路由状态集成到应用程序状态中，并使用 @ngrx/effects 包高效地处理副作用。通过这些步骤，我们可以创建一个有组织的、易于管理、跟踪以及调试的 Angular 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbe58b5cbfe1ea0611b62