简介
redux-devtools-grid-monitor 是一个浏览器开发者工具，用于监视 Redux 应用程序的数据流，并且以表格形式展示数据。它可以帮助开发者更好地理解和排除 Redux 应用程序中的问题。
redux-devtools-grid-monitor 是一个 Redux DevTools 的插件。在 Redux DevTools 中集成 redux-devtools-grid-monitor 后，开发者可以通过点击浏览器开发者工具的 "Grid Monitor" 选项，来查看 Redux 应用程序中的状态。
安装
redux-devtools-grid-monitor 可以通过 npm 安装。在终端运行以下命令：
npm install --save-dev redux-devtools-grid-monitor
使用步骤
- 在你的 Redux 应用程序中安装 Redux DevTools。
import { createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; const store = createStore(reducer, composeWithDevTools());
- 在 Redux DevTools 中加载 redux-devtools-grid-monitor。
-- -------------------- ---- ------- ------ - ------------------- - ---- ------------------------------------------- ------ ----------- ---- ------------------------------ ----- ---------------- - --------------------- ----- -------- ----------------- ---------------------- --- ----- ----- - ------------ -------- ----------------- -- --- ----- ---------- -- ---- ------- ------------------ -- ----- ----- --------- -- ------ - -- ------- --------- -------------- ----------- --- ----- ------- ------------ ---------------- -- ------------- ------------ ------------------------------- --展开代码
在以上代码中，我们通过 GridMonitor 组件将 redux-devtools-grid-monitor 集成到了 Redux DevTools 中。
- 打开浏览器开发者工具，在 Redux DevTools 选项卡中选择 "Grid Monitor"。
现在，你可以在 Redux 应用程序中看到 state 的值以及 action 的流。
示例代码
以下是一个展示 redux-devtools-grid-monitor 如何实时监视 Redux 应用程序中 action 和 state 的变化的示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- - ---- -------- ------ - -------- - ---- -------------- ------ - ---------------- - ---- --------------------------- ------ ----------- ---- ------------------------------ ----- ------- - ------ - - -------- - -- ------- -- - ------ ------------- - ---- ------ ------ - -------- ------------- - - -- ---- ------ ------ - -------- ------------- - - -- -------- ------ ------ - -- ----- ----- - -------------------- -------------------- ----- ------- - -- -- - ----- ---------- - -- -- ---------------- ----- ----- --- ----- ---------- - -- -- ---------------- ----- ----- --- ------ - ----- --------------------------------- ------- ------------------------------- ------- ------------------------------- ------ -- -- ----- --- - -- -- - --------- -------------- ----- ----------- -------- -------- -- ------------ -- ------ ----------- -- ------ ------- ----展开代码
总结
redux-devtools-grid-monitor 是一个强大的工具，可以帮助开发者更好地理解并调试 Redux 应用程序。在本文中，我们通过示例展示了如何在 Redux DevTools 中集成 redux-devtools-grid-monitor，并通过示例代码展示了如何使用它来监视 Redux 应用程序的数据流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68870
