在编写 Web 应用程序时，可能会遇到需要在多个组件中共享数据的情况。Redux 是一个流行的库，用于管理 Web 应用程序中的状态。Redux 中的状态以单一树的形式存储，称为“store”。由于 Redux 的使用，可以极大地革新前端工程的状态管理，以实现更好的性能和可维护性。
当需要调式 Redux 应用程序时，开发者需要跟踪 store 中状态的变化。Redux DevTools 是一个 Chrome 插件，可帮助开发者跟踪状态变化的过程。打开 DevTools 后，你可以轻松找到和调试应用程序追踪 store 中状态变化的信息。
DevTools 的基本用法
在 React 应用程序中使用 Redux 的时候，可以通过安装 redux-devtools-extension 库将 DevTools 集成到项目中。安装 redux-devtools-extension 库后，将 store 传递到 createStore 函数中即可启用 DevTools。
import { createStore } from 'redux'
import rootReducer from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(
rootReducer,
composeWithDevTools()
)以上创建的 store 集成 DevTools，如果需要观察 state 属性的变化，可以通过以下方式打开 DevTools:
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ ----------- ---- ------------
------ - ------------------- - ---- --------------------------
----- ----- - ------------
------------
---------------------
-
----------------
--------- --------------
---- --
------------
--------------------------------
----------------------------------- -- ------------------------------------- -- -- --------
-在浏览器中打开 DevTools 后，点击 "Redux" 标签页，在 "State" 标签页下可以看到整个 state 树，你可以浏览或查找特定的键值对。通过快捷键 Ctrl + H 或者 Cmd + H 可以打开 DevTools 的历史记录面板，查看应用在运行过程中 state 树的不同版本。
如何在开发过程中使用 DevTools
在开发应用程序时，建议使用 DevTools 进行状态管理。在开发过程中，你可以使用 DevTools 的以下功能:
时间旅行
时间旅行是一项非常强大的功能，可允许开发者回溯和查看所有之前发生的状态更改。例如，对于一个购物网站，购物车内容的更改对于任何一个页面都是关键状态。使用 DevTools 的时间旅行功能，你可以轻松地回溯到之前的版本，查看已删除的物品或添加的新物品，很方便！
时间旅行功能的实现方式可以选择是记录所有的 action 或者仅记录关键 action。采用前者较为灵活，采用后者则是更高效的方式，但可能会丢失部分信息。
实时编辑
DevTools 可以实时编辑 store 中的 state，以便开发人员可以在应用程序运行时轻松地进行调试。例如，某些特定场景下的错误状态，我们可以通过 DevTools 临时调整 state 以检测其有效性。当然，这个状态的更改只是临时的，当你刷新页面或重新启动应用程序时，更改就会丢失。
属性监控
监控属性的更改是一个非常重要的功能。通过 DevTools，你可以设置监控你想要跟踪的对象或元素。当属性更改时，将收到通知，从而可以了解一个元素或对象何时被更新等。
结论
使用 Redux DevTools 可以轻松地找到和跟踪应用程序中 store 中状态的变化。对于较大的应用程序，DevTools 还可以用于调试，这使得它们在 Web 开发中特别有用。如果你正在使用 Redux，那么你必须使用 DevTools，以使你自己成为 Web 开发者中的行家里手！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efc4476fbf96019730c7bf