前言
当我们开始通过 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，我们需要将它安装到我们的项目中。在终端中运行下面的命令即可：
$ npm install redux-logger
天然使用 Redux-Logger
要使用 Redux-Logger，只需将其配置为 store 的中间件即可：
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(logger)
);这样配置后，我们的应用程序就会通过中间件来记录用于测试操作的所有数据，以及每次更新的状态。此时打开浏览器控制台，你就可以看到完整的页面交互和更新历史记录了。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。希望这篇文章对你发现和解决任何潜在的问题都有所帮助！
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/645a0c94968c7c53b0c2afc5