介绍
ngrx devtools 是一个用于 Angular 应用程序中的调试工具，它能够帮助开发者更好地理解 Angular 中的数据流，以及任何在这个流上进行的操作。ngrx-devtools-nativescript-next 是针对于 nativescript 应用程序的 ngrx devtools 扩展，它使你可以在 nativescript 应用程序中使用 ngrx devtools 来调试应用程序的状态。
在本教程中，我们将会讨论如何使用 ngrx-devtools-nativescript-next 来调试 nativescript 应用程序，并演示一些示例代码和教程中的样例应用程序。
环境
在开始使用 ngrx-devtools-nativescript-next 之前，你需要先确认你的开发环境已经准备好了 Angular, nativescript 和 ngrx。请确保你已经:
- 安装了
angular - 安装了
nativescript - 使用
@ngrx/store来管理与应用程序状态的交互.
建议阅读 官方文档 以确认你的环境已经准备好了。
安装
要使用 ngrx-devtools-nativescript-next，你需要将它作为你的 nativescript 项目的一个依赖项进行安装。作为一个例子，我们可以从命令行中来安装它：
npm install ngrx-devtools-nativescript-next --save
配置
一旦你已经将包安装到你的应用程序中，你还需要在你的 app.module 文件中进行一些配置，如下面的例子：
-- -------------------- ---- -------
------ - --------- --------------------- - ---- ----------------
------ - ------------------ - ---- ------------------------
------ - ---------------------------- - ---- -----------------------------------
------ - ------------------- - ---- -----------------------
------ - ----------- - ---- ------------------------------
------ -
------------
--------------
------------
-----
- ---- --------------
------ - ------------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------- - ---- -----------------------
------ - ------------------- - ---- -----------------------
------ - --------------------------- - ---- ---------------------
------ - ---------- - ---- ----------------------
------ - ----------------------------- - ---- ----------------------------------
----- ------------- ------------------ - ---
-- ------------------------- -
------------------
---------------------------------------- -------- ---------- --
--
-
-----------
------------- ---------------
-------- -
-----------------------------
-------------------
-----------------
--------------------------------------
----------------------------- - ------------ ---
------------------------------------
--------------------------------
------- --
--
--
---------- ---
---------- --------------
--
------ ----- --------- --你需要确保你应用程序的环境中，StoreDevtoolsNativescriptNext.enhancer 已经被添加到你的 metaReducers 中。这将启用 ngrx-devtools-nativescript-next 作为状态监视器。
monitor 参数是一个可以用来限制何时启用开发工具的可观察对象。你可以控制开发工具输出，使其仅在特定条件下输出。在本教程中，我们使用 AppMonitor 作为开发工具启用的监视器。
import { filter } from "rxjs/operators";
import { AppState } from "./app.reducers";
export const AppMonitor = (state$: Observable<AppState>): Observable<any> =>
state$.pipe(filter((state: AppState) => state.uiState.showDebugTools));在 AppMonitor 中，我们可以控制开发工具什么时候展开。在本例中，只有当 showDebugTools 为 true 时，才会展开工具。
在应用程序启动时，开发工具应该已经被注入到根级 Store 中。你可以使用 Alt + D 或 Cmd + D 来打开开发工具。
示例
现在我们已经完成了使用 ngrx-devtools-nativescript-next 来调试你的 nativescript 应用程序的配置。接下来我们将展示一些示例代码，以便你更好的理解如何使用它。
在这个例子中，我们的应用程序只有一个组件。我们将向用户展示一个值，并使用 ngrx 在用户操作的同时更新它。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - --------------- - ---- ----------------------
------ - -------- - ---- -----------------------
------------
--------- ---------
------------ -----------------------
--
------ ----- ------------ -
------ --------- -------------------
------------------- ------ ---------------- -
------------- - ----------------------- -- ---------------
-
------ ----------- -
----------------------- -------------------
-
-在这个组件中，我们使用 ngrx 来发布 IncrementAction() 操作。这将更新 AppState 中的状态，以使用户界面中的值得到更新。
当用户单击按钮时，我们将执行 this.store.dispatch(new IncrementAction())，这将触发 ngrx 渲染的自动更新，并在开发工具的状态栏中更新新的值。
<StackLayout onTap="increment()" class="page"> <Label [text]="(message$ | async) || 'Loading Message...'" class="text-center"></Label> <Button text="Increment Value"></Button> </StackLayout>
最后，我们在应用程序的模板文件中，建立元素，将值和按钮展示给用户进行操作。
结论
在本教程中，我们讨论了如何使用 ngrx-devtools-nativescript-next 来调试 nativescript 应用程序，并演示了一些示例代码。希望这篇教程能够帮助你更深入地了解如何使用 ngrx-devtools-nativescript-next 来优化你的开发流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fb681e8991b448dd03b