前言
当我们开始通过 Redux 管理应用程序的状态后,我们需要一种简便的方式来跟踪我们执行的 action、更新的状态,以及整个应用程序的状态。这就是 Redux-Logger 库的用途。本文将介绍 Redux-Logger 库的基本知识、用法,以及如何使用它来更好地调试你的应用程序。
Redux-Logger 简介
Redux-Logger 是 Redux 官方推荐的一种用于打印应用程序状态的调试工具,它记录了每一个 action 以及对于它所产生的新的应用程序状态。使用 Redux-Logger,在控制台中可以很容易地看到 effect 和 reducer 的执行过程以及它们对 store 的更改。而且,Redux-Logger 还支持以执行 action 时所消耗的时间,和时间戳和其他选项的形式输出日志。Redus-Logger 可以在开发环境下使用,生产环境下应禁用。
Redux-Logger 的安装
想要使用 Redux-Logger,我们需要将它安装到我们的项目中。在终端中运行下面的命令即可:
- --- ------- ------------
天然使用 Redux-Logger
要使用 Redux-Logger,只需将其配置为 store 的中间件即可:
------ - ------------ --------------- - ---- -------- ------ ------ ---- --------------- ------ ----------- ---- ------------------- ----- ----- - ------------ ------------ ----------------------- --
这样配置后,我们的应用程序就会通过中间件来记录用于测试操作的所有数据,以及每次更新的状态。此时打开浏览器控制台,你就可以看到完整的页面交互和更新历史记录了。Redux-Logger 还提供其他参数来自定义日志记录。
定制化 Redux-Logger
Redux-Logger 提供了许多参数,以便更好地控制日志输出。接下来,我们将介绍你如何自定义你的日志记录。
Collapsed(默认:true)
如果设置为 true,则输出的日志将被折叠(默认是折叠的)。
Duration(默认:false)
如果设置为 true,则输出红色,以表示 action 的响应时间超过阀值(默认值为10ms)。
Level(默认:'log')
将日志级别设置为 console[级别]。警告(warn)或错误(error)可以更明确地引起注意,而对于裸露的对象来说,调试(debug)通常是最合适的级别。此外,log, warn, debug, error, trace 等级别可供选择。
Predicate(默认:(getState, action) => true)
将日志输出的谓词函数。默认情况下,输出所有 action。
Colors(默认:false)
如果设置为 true,则所有操作和状态更新的控制台输出都将显示为彩色的,以突出显示它们的不同元素。
Diff(默认:false)
如果设置为 true,则输出新旧状态与每个操作的 diff。如果状态树很大,那么可能会减慢应用程序的执行速度。
Redux-Logger 示例
让我们看一下一个简单的示例,以便更好地理解 Redux-Logger 如何工作。
------ - ------------ --------------- - ---- -------- ------ ------ ---- --------------- ----- ------------ - - -------- - -- -------- -------------- ------- - ------ ------------- - ---- ------------ ------ - -------- ------------- - - -- ---- ------------ ------ - -------- ------------- - - -- -------- ------ ------ - - ------ ----- ----- - ------------ -------- ------------- ----------------------- -- -- ----- -- -------- ------ ------------ -- ---- ----- --------- -- -- ------ ------ ------------ -- ---- ----- --------- -- -- -------- ------ ------------ -- ---- ----- --------- -- -- ------ ------ ------------ -- ---- ----- --------- --
在上面的例子中,我们定义了一个名为 reducer
的函数,它接收当前的状态(state)和一个操作(action),并返回一新的状态。我们还在 createStore
中使用了 applyMiddleware(logger)
以使用 Logger。
总结
在本文中,我们详细介绍了 Redux-Logger 库的基本知识,以及在我们的项目中使用它的方法。我们还了解了一些如何使用输出选项参数来自定义日志内容的技巧。最后,我们提供了一个简单的示例来说明如何使用 Redux-Logger。希望这篇文章对你发现和解决任何潜在的问题都有所帮助!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645a0c94968c7c53b0c2afc5