如果您正在开发 Redux 应用程序并希望记录其操作，那么 redux-simple-logger 绝对是您需要尝试的 npm 包。 这个包可以帮助您在控制台中输出有关您应用程序中的每个 redux 操作的详细信息，从而帮助您更好地调试和优化 Redux 应用程序。在本篇文章中，我们将深入探讨 redux-simple-logger 的使用方法和一些示例代码。
安装 redux-simple-logger
要开始使用 redux-simple-logger，您需要安装它以及其他依赖项。 为此，请运行以下命令：
npm install --save redux-simple-logger redux react-redux
请注意，您需要已经将 Redux 和 React-Redux 添加到项目中。 在继续之前，请确保您已安装并导入这些依赖项。
配置 redux-simple-logger
一旦您已安装了 redux-simple-logger，您需要将其配置以在控制台中输出 redux 操作的详细信息。 以下代码是一个简单示例，演示了如何配置 redux-simple-logger 并将其添加到 Redux store 中：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------ - ---- ----------------------
------ ----------- ---- -------------
----- ---------- - ---
-- --------------------- --- ------------- -
--------------------------------
-
----- ----- - ------------
------------
------------------------------
--
------ ------- ------上述代码中，首先将 createLogger() 函数导入，并使用 createStore 和 applyMiddleware 应用程序中间件函数创建了一个 Redux store。然后，如果当前的环境变量不是 “production” ，我们就将 createLogger() 添加到 middleware 数组中。
这样，redux-simple-logger 就已经被成功添加到了 Redux store 的中间件函数列表中，因此 Redux 操作信息将输出到控制台上。 如下所示为控制台输出示例：
action ADD_TODO @ 04:40:45.070
prevState []
nextState [{"id":1,"text":"Learn Redux","completed":false}]
action {"type":"ADD_TODO","text":"Learn Redux","id":0}
time 1612156845070上面的示例所示，在控制台中打印了 Redus 的操作类型、prev状态、next状态、action和时间。这about助您分析和调试您的Redux操作并优化您的React应用程序。
高级配置
除了上述基本配置之外，我们还可以使用列出的配置项来进一步自定义 redux-simple-logger 行为，这里提供所有可配置项：
{
level: 'log', // 日志级别
duration: true // 输出组成时间也许你想确切时间需要
}要设置 level，只需传递以下配置项中之一：'log'，'console'，'warn'，'error'。
要启用时间戳，只需将 duration 属性设置为 true 即可。
以下是增强版的示例，其中使用了以上所有配置项：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------ - ---- ----------------------
------ ----------- ---- -------------
----- ---------- - ---
-- --------------------- --- ------------- -
----------------
--------------
------ ----------
--------- ----
--
--
-
----- ----- - ------------
------------
------------------------------
--
------ ------- ------现在，您可以在控制台中找到增强版的输出结果：
log @ 02:16:39.550 > action ADD_TODO
console @ 02:16:39.584 > prevState [{"id":1,"text":"Learn Redux","completed":false}]
console @ 02:16:39.585 > nextState [{"id":1,"text":"Learn Redux","completed":false},{"id":2,"text":"Go Shopping","completed":false}]
console @ 02:16:39.585 > action {"type":"ADD_TODO","text":"Go Shopping","id":2}
console @ 02:16:39.585 > time 1612150599584ms这里的输出结果包括时间戳和具体信息，让你更好的拿到 Redux 操作。
小结
在本篇文章中，我们深入介绍了如何使用 redux-simple-logger 包以及如何配置，以便在开发 Redux 应用程序时从控制台输出详细信息，以便于开发者分析和调试 Redux 应用程序。希望在您的开发过程中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b57