Redux 是一个非常流行的 JavaScript 应用程序状态管理库。Redux 非常强大，但有时自己的开发环境可能需要一些额外的帮助才能更好地理解自己的应用程序状态。现在，有一个 npm 包叫做 redux-live 可以帮助你进行 Redux 状态的可视化调试。
安装
你可以通过 npm 安装 redux-live：
npm install redux-live --save-dev
如何使用
所有你需要做的就是在你的 Redux 应用程序的 store 上调用 reduxLive()。
import { createStore } from 'redux';
import { reduxLive } from 'redux-live';
const store = createStore(myReducerFunction);
reduxLive(store);这会将 redux-live 集成到你的 Redux 应用程序中，并在你的应用程序状态更改时自动更新 redux-live 工具。
如果你在使用 React，你可以在 React.render() 中将 Redux Provider 的 store 包装在 reduxLive() 函数中。
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - --------- - ---- -------------
----- ----- - -------------------------------
-----------------
-------------
--------- --------------
---- --
------------
-------------------------------
--现在，当你在 Redux 应用程序中调度 dispatch() 并更改状态时，你将看到你的状态在 redux-live 工具中自动更新。
展示更多信息
你可以向 reduxLive() 传递一个选项对象，以展示更多有用信息。有关更多信息，请查看 redux-live 文档。
例如，以下示例将展示一个包括当前应用程序状态的树和应用程序通过时间的状态更改信息的面板：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------- - ---- -------------
----- ----- - -------------------------------
---------------- -
----------- -
--------------------------- -----
--
------------- -
-------- -------
------- -------
--------------- ----------
----------- ----------
--
---结论
redux-live 能够提供非常有用的开发帮助，特别是在你不断调整你的应用程序状态时。阅读该 npm 包的文档可以展示更多的使用方法。它是一个可以帮助你更好地理解你的应用程序状态的工具！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a58