在 Redux 应用中，我们经常需要调试和查看应用中的状态流变化，以及对应的操作和行为。这时，一个方便实用的状态日志工具就是必不可少的。而 redux-logalize 正是提供了这个功能的 npm 包。
1. 安装和配置 redux-logalize
首先，我们需要安装和引入 redux-logalize。
npm install redux-logalize --save
然后，在我们的 Redux 应用的 store.js 文件中，进行 redux-logalize 的配置和引用：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ------ ---- ----------------- -- -- -------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------------------- -- - --------------- --- -------------- --
2. 使用 redux-logalize
当我们配置好了 redux-logalize 后，在浏览器中调试 Redux 应用时，即可看到状态流变化的详细信息。例如，我们可以看到每个状态在变化时，外部发起的操作类型和相关的数据信息。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
------ ----- ------------ - -------------
----- ----------
------------- -
------ --
--
--------- -
---------- ------- -- -
----------- -- --
--
---------- ------- -- -
----------- -- --
--
--
---
------ ----- - ---------- --------- - - ---------------------
------ ------- ----------------------- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ---------- --------- - ---- -----------------
-------- --------- -
----- ----- - ------------------- -- ---------------------
----- -------- - --------------
------ -
-----
------- ----------- -- ---------------------------------
--------------------
------- ----------- -- ---------------------------------
------
--
-在上面的代码中，我们使用了 createSlice 和 useSelector、useDispatch 等 Redux 工具。当我们在浏览器中进行加减操作时，即可在 Redux 开发者工具中看到如下所示的状态变化信息：
从图中可以看到，我们进行了一次 increment 操作，导致 value 状态值从 0 变为 1。在日志信息中，我们还可以看到该 Action 对应的时间、类型、操作前后的状态值等详细信息。
3. 结语
通过使用 redux-logalize，我们可以方便地调试和查看 Redux 应用中状态的流变化，并更好地了解应用的行为和操作。
近年来，Redux 开发者工具生态已经越来越完善，获得了广泛的开发者支持和认可。在实际的工作中，我们应当充分利用这些工具，以提高开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588481e8991b448d5c68