在前端开发中，状态管理是非常关键的一部分。Redux 是一个流行的 JavaScript 应用程序状态容器，可以提供可预测性、可测试性和可扩展性。配合 Redux DevTools，我们可以更加方便地调试和监控状态的变化。而 local-redux-devtools 是一个基于本地存储的 Redux DevTools 插件，方便我们在开发过程中实时查看应用程序状态的变化。
1. 安装和基础配置
使用 npm 安装 local-redux-devtools：
--- ------- --------------------
在 Redux store 中添加 local-redux-devtools：
------ - ------------------- - ---- --------------------------- ------ - ----------- - ---- -------- ------ ------- ---- ------------ ----- ----- - -------------------- -----------------------
通过 composeWithDevTools 包裹 createStore，就可以将 Redux DevTools 集成到应用程序中。
------ - ------------------- - ---- ------------------------------------------- ------ - ----------- - ---- -------- ------ ------- ---- ------------ ----- ----- - -------------------- -----------------------
如果你不想在生产环境中使用 Redux DevTools，可以将 composeWithDevTools 从生产依赖项中移除，并使用 compose 替代它。
2. 高级配置
local-redux-devtools 提供了一些高级配置选项，可以满足特定的开发需求。
2.1. maxAge
maxAge 设置了存储在本地存储中的时间轴状态最大数量。默认值是 50。
------ - ------------------- - ---- --------------------------- ------ - ----------- - ---- -------- ------ ------- ---- ------------ ----- ----- - -------------------- ---------- --------------------- ------- ---- ----
2.2. shouldRecordChanges
shouldRecordChanges 是一个函数，用于判断是否应该记录状态变化。默认情况下，它将记录每一个状态变化。
------ - ------------------- - ---- --------------------------- ------ - ----------- - ---- -------- ------ ------- ---- ------------ ----- ----- - -------------------- ---------- --------------------- -------------------- ------- ------- -- ----------- --- ------------ ----
在上面的代码中，shouldRecordChanges 会在 INCREMENT action 触发时记录状态变化。
2.3. shouldStartLocked
shouldStartLocked 设置了 DevTools 是否应该在锁定状态下启动。默认情况下，它是 false。
------ - ------------------- - ---- --------------------------- ------ - ----------- - ---- -------- ------ ------- ---- ------------ ----- ----- - -------------------- ---------- --------------------- ------------------ ----- ----
在上面的代码中，DevTools 在启动时会处于锁定状态。
3. 示例
下面是一个使用 local-redux-devtools 的简单示例：
------ - ------------------- - ---- ---------------------------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ----- - -------------------- ---------- -----------------------
----- --------------- - - ----- ----------- --
----- --------------- - - ----- ----------- --
--------------------------------
--------------------------------
--------------------------------在浏览器中打开 Redux DevTools，并查看 console 中的日志，可以看到状态变化的历史记录。即便页面刷新后，也可以在 DevTools 中看到之前的状态变化历史记录。
4. 总结
在这篇文章中，我们讲解了 local-redux-devtools 的安装和配置，以及一些高级配置选项。我们还通过示例演示了如何使用 local-redux-devtools 监控状态变化。学习并使用 local-redux-devtools，可以大大提升我们的开发效率和质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055db081e8991b448db703