在前端开发中，redux-logger 是一个非常实用的 npm 包，可以帮助开发者更好地理解应用程序中的状态变化。本文将详细介绍如何在应用程序中使用 redux-logger。
redux-logger 基础知识
redux-logger 可以用来记录 Redux 应用程序中的 state 变化，包括 state 的变化前后值、触发的 action、变化所在的时间等信息，以便开发者能够更好地理解应用程序的状态变化。redux-logger 通常与 Redux 的 middleware 一起使用，middleware 是 Redux 中的一种扩展机制，用来封装 action 的派发和 state 的存储和更新等操作。
使用 redux-logger
使用 redux-logger 需要先安装它：
npm install redux-logger --save-dev
安装完毕后，我们需要在应用程序的 Redux store 中配置使用 redux-logger。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------ ---- --------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ----------------------- -- ------ ------- ------
上面的代码中，我们引入了 Redux 的 createStore 和 applyMiddleware 方法，redux-logger 包以及我们的 rootReducer。接着通过 createStore 方法创建了一个 Redux store，同时将 redux-logger 中间件传入了 applyMiddleware 方法中。
通过这样配置，在应用程序中每次有 action 被触发时，redux-logger 都会自动打印出当前 state 的变化情况，如下所示：
-- -------------------- ---- -------
------ - ----------- - ---- ------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------------- -
------ ----- - -
--
---------------- -
------ ----- - -
-
-
--
------ ----- - ---------- --------- - - --------------------
------ ------- ---------------------- -------------------- ---- -------
------ - -------------- - ---- ------------------
------ -------------- ---- ----------------------------------
------ ------ ---- --------------
------ ------- ----------------
-------- -
-------- --------------
--
----------- --------
--此外，我们也可以通过配置选项来控制打印输出的内容。其中，logger 包提供了三个选项，分别为 collapsed、colors、diff，下面我们来了解一下。
collapsed 选项
collapsed 选项默认为 true，表示用一行简短的形式打印输出。当我们将 collapsed 设置为 false 时，打印输出的内容将是一个可展开的对象。例如：
-- -------------------- ---- ------- ------ ------ ---- --------------- ----- ---------------- - -------- ---------- ----- --- ----- ----- - ------------ ------------ --------------------------------- --
打印输出结果与上面的示例稍有不同，如下所示：
-- -------------------- ---- ------- -------- ------ - -------- - - ------ - ------------------------------------------------ ---- ------ - -------- - -
colors 选项
colors 选项默认为 true，表示打印输出的内容将使用颜色来区分不同的部分。当我们将 colors 设置为 false 时，打印输出的内容不会使用颜色。例如：
-- -------------------- ---- ------- ------ ------ ---- --------------- ----- ---------------- - -------- ------- ----- --- ----- ----- - ------------ ------------ --------------------------------- --
打印输出结果与上面的示例稍有不同，如下所示：
-- -------------------- ---- ------- -------- ------ - -------- - - ------ - ------------------------------------------------ ---- ------ - -------- - -
diff 选项
diff 选项默认为 true，表示打印输出的内容将对状态的变化进行比对，并打印出变化的部分。当我们将 diff 设置为 false 时，打印输出的内容将只会打印出当前的状态。例如：
-- -------------------- ---- ------- ------ ------ ---- --------------- ----- ---------------- - -------- ----- ----- --- ----- ----- - ------------ ------------ --------------------------------- --
打印输出结果与上面的示例稍有不同，如下所示：
action : {"type":"counter/increment","payload":undefined}
next state:
{
counter: 1
}总结
在这篇文章中，我们学习了如何使用 redux-logger 这个 npm 包来记录 Redux 应用程序中的状态变化。我们详细介绍了如何安装和配置 redux-logger，并讲解了 redux-logger 的几个选项。希望本文对你的 Redux 开发之路有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65240