Redux 是一种 JavaScript 应用程序状态管理器，Redux 插件 redex-logger 可以帮助开发者更好地理解 Redux 状态管理器的状态变化。本文将对这个插件的源码进行详细分析，以帮助读者更好地理解其工作原理，提高开发者的 Redux 技能。
Redex-Logger 的基本功能
Redex-Logger 的主要功能是在 Redux 状态管理器中记录操作，以便于开发人员更好地理解应用程序状态变化。这个插件可以将 Redux 的状态更改记录在控制台上，并且将状态变化记录到开发工具的控制台上。
Redex-Logger 作为一个 Redux 中间件，它会监听所有的状态更新，将状态变更前和变更后的 state 值记录下来，最终以可视化的方式呈现在浏览器控制台中，开发人员可以通过查看控制台上的信息来跟踪 Redux 状态变化过程，并可以根据这些資訊来进行代码调试和优化。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------ ---- --------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ----------------------- -- ------ ------- ------
源码分析
下面我们将根据 Redex-Logger 的源码进行分析，帮助读者了解其工作原理。
-- -------------------- ---- -------
------ ------- -------- --------------
--------- - -----
----------
-------- - ------
--------- - -----
----- - ------
--------- - -----
---- - -----
- - --- -
------ -- -------- -- -- -
------ ------ -- -------- -- -
-- ------- --------- --- ---------- -- -------------------- -------- -
------ -------------
-
----- --------- - --- -------
----- --------- - -----------
----- ----------- - -------------
----- --------- - --- ------ - ----------
----- ---------- - --------------------
----- ------- - ------- ----------------------- - - -- ------------ --- - -----
----- -------------- - ------ --------- --- ---------- - ------------------- ------- - ----------
----- ------------- - ----------------------
----- -------- - -------------- - -------------- - ---
------------------ ---------- -- ------------------ ------- ------------- ------- --------
-- ---------------- -
-------------------------- ------- ------- ------------------ ------------ -------
- ---- -
----------------- ------- ------- ------------------ ------------ -------
-
-- ------ -
--------------- ----------- ------- ------------- ------------ ------ -----------
--------------- -------- ------- --------------- ------------ ------ --------
--------------- ----------- ------- ------------- ------------ ------ ------------
- ---- -
--------------- ---- ------- ------- ------------- ------------ ------ -----------
--------------- -------- ------- --------------- ------------ ------ --------
--------------- ---- ------- ------- ------------- ------------ ------ ------------
-
-- ----------- -
------------------------------------------------------------- -- --------------
-
-------------------
------ ------------
--
--
-首先我们可以看到，createLogger 函数包含了一个默认参数对象，其包含一系列配置属性（collapsed、predicate、duration、timestamp、level、logErrors、diff），它们可以被更改，以便适应不同的开发环境。
该函数返回了一个新函数，这个函数返回了另一个函数。第一个函数用于存储当前 state，第二个函数用于处理下一个操作，即执行 next 函数。
-- -------------------- ---- -------
-- -------- -- -- -
------ ------ -- -------- -- -
---
----- --------- - -----------
----- ----------- - -------------
---
--------------- ---- ------- ------- ------------- ------------ ------ -----------
--------------- -------- ------- --------------- ------------ ------ --------
--------------- ---- ------- ------- ------------- ------------ ------ ------------
---
------ ------------
--
--该函数会处理每个 action，记录之前和之后的 state，以及 action 本身的信息。最后，它会 console 出当前的 state 接口，以便开发者更好地跟踪状态的变化。
Redex-Logger 的使用
现在我们知道了 Redex-Logger 的工作原理，我们来看看如何将它应用到我们的项目中。
需要先安装 redex-logger 的依赖。
npm install --save-dev redex-logger
然后创建一个 Redux 的 store 实例，并将 redex-logger 作为 Redux 的中间件来使用。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------ ---- --------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ----------------------- -- ------ ------- ------
在使用 Redex-Logger 之后，我们就可以看到我们的状态发生了什么变化，以及状态变化的原因。
总结
Redex-Logger 是一个非常有用的工具，它可以帮助开发者更好地理解 Redux 的状态管理器中状态的变化过程，以及如何在操作后跟踪这些状态变化。同时，我们也对 Redex-Logger 插件的源码进行了详细分析，让开发者能够更好地理解其工作原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66537c9ad3423812e47e9b5b