介绍
@ngrx/store-devtools 是一个帮助你调试 @ngrx/store 状态的工具包，它提供了一个类似 Redux DevTools 的用户界面，让开发者可以更方便地监控应用程序的状态。
安装
首先，打开终端并进入你的项目目录，然后通过 npm 安装 @ngrx/store-devtools。
--- ------- ---------- --------------------
集成
接下来，我们需要将 @ngrx/store-devtools 集成到我们的应用程序中。首先，在你的根模块中导入 StoreDevtoolsModule 模块，并在 imports 数组中添加它。
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- --------------
------ - ------------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------
--------------------- ------ -------------- ---
--------------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- --在上面的示例中，我们将 StoreDevtoolsModule 导入到我们的根模块，并将它添加到 imports 数组中，同时使用 StoreModule.forRoot() 为我们的应用程序配置 @ngrx/store。我们还定义了一个名为 counterReducer 的简单 reducer，用于管理一个名为 count 的状态。
界面
现在，我们可以在应用程序中添加一个调试器组件，用于显示状态变化。在 Angular 中，我们可以通过使用 StoreDevtoolsModule.instrument() 方法来轻松地添加这个组件。
-----------------------------------------
在上面的代码中，我们添加了一个 ng2-redux-devtools 组件，用来显示状态的更改。
示例
现在，我们来编写一些示例代码，用来测试 @ngrx/store-devtools 的功能。
------ - ------------- -------------- -- - ---- -------------- ------ - ---------------------- -------------- - ---- -------------- ------ - -------- - ---- -------------- ------ ----- --------- - -------------------------- ------ ----- --------- - -------------------------- ------ ----- ----- - ---------------------- ------ ----- -------------- - -------------- -- ------------- ----- -- ----- - --- ------------- ----- -- ----- - --- --------- -- -- -- -- ------ ----- ----------- - ------------------------------- ----------------- ------ ----- ------------- - --------------- ------------ ----- -- -- ----- -- --
在上面的示例代码中，我们定义了三个 actions：increment、decrement 和 reset，用于进行状态变更操作。我们还定义了一个 counterReducer，用于处理这些操作，具体的变化逻辑在 on() 方法中实现。最后，我们使用 createFeatureSelector 和 createSelector 来获取我们的状态，并将其返回给组件。
结论
@ngrx/store-devtools 是一个非常有用的工具包，它使得调试状态变得更加容易。通过使用这个包，我们可以方便地监控应用程序的状态，并追踪状态变化的历史记录。希望这篇文章可以帮助你更好地理解和使用 @ngrx/store-devtools。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/ngrx-store-devtools