随着前端技术的不断发展，越来越多的 JavaScript 应用在代码结构上采用了单向数据流的模型。Redux 是其中比较流行的一种解决方案。它通过组织应用的状态和行为来提高应用的可维护性和可扩展性。
Redux DevTools 是一个 Chrome 扩展，它提供了一种方便的方法来检查和调试 Redux 应用的状态变化。在本文中，我们将深入探讨使用 Redux DevTools 来实时监听状态变化的方法，并提供示例代码和指导意义。
安装 Redux DevTools
首先，在 Chrome 网上应用店中搜索 Redux DevTools，然后安装。
在安装完成后，我们需要在应用中配置 Redux DevTools 的运行环境。
-- -------------------- ---- ------- ------ ------------- ---------------- -------- ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- --------- - --- ----- ----------------- - ------------------------------------ -- ------- ----------------- --- ----------- - ------------------------------------ - ----- ----------------- - -------- ----------------------- ------------ -- ----- ----- - ------------ ------------ ----------------- -- ------ ------- ------
在上面的代码示例中，我们引入了 Redux 的相关支持库，并创建了一个 Redux store。属性 enhancers 是一个用于加强 store 的数组。接下来，我们检查是否存在 Redux DevTools 扩展，如果存在，就将其添加到 enhancers 数组中。最后，我们使用 compose 函数将 enhancers、middleware（中间件）以及其他任何需要的数值加入 store 中。这样，我们就能够开始实时监控 Redux store 了。
使用 Redux DevTools
在应用中使用 Redux DevTools 很简单。我们只需要打开 Chrome 开发者工具，切换到 Redux 选项卡，然后应用即可与 Redux DevTools 交互。
通过这个级别的配置，我们可以直接查看 store 中的数据。
如果我们要修改 store 中的数据，DevTools 就会记录下来我们做的任何更改，同时还会显示我们所做修改的整个状态历史记录。
在上面的示例中，事件 “Increment” 和 “Decrement” 分别增加和减少计数器的值。点击相应的按钮时，我们可以发现其对应的状态已经被更新。同时，我们也可以通过看到事件触发的时间来确定修改状态的时间。
通过在 DevTools 中的“state diff”（状态差异）功能，我们可以直观地查看修改前后状态的差异。
结论
Redux DevTools 是一个非常实用的工具，通过它，我们可以更加直观地监控和调试 Redux 应用的状态变化。它提供了一个简单而且强大的解决方案来跟踪、维护以及调试状态变化。它允许我们实时地查看状态变化、回溯以前的操作、以及检查我们考虑的状态是否符合我们预期。可以说，使用 Redux DevTools 对于一个 Redux 应用开发者来说是必不可少的。
通过本文的指导，读者可以学习到如何安装和配置 Redux DevTools，以及如何利用该工具来监控和调试 Redux store。Redux DevTools 的深度和广度不仅仅局限于本文介绍的。有时间的话可以深入研究一下，相信一定会有更多的收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67758d726d66e0f9aaf95901