简介
redux-looking-glass 是一个用来简化 Redux 应用程序调试的 npm 包。通过使用 redux-looking-glass，开发者可以更加容易地查看 Redux 数据流中 Store 中的状态，以及分析和调试数据变化。
与 Redux DevTools 相比，redux-looking-glass 有以下特点：
- 用户可以在开发中实时监测状态，无需在结束开发后进行回顾。
- 提供了更为流畅的交互。
- 使用了 webpack 热模块替换，因此开发时无需刷新页面。
安装
首先，在使用 redux-looking-glass 之前，需要确保已经正确地集成了 Redux。具体请参考 Redux 官网。
安装 Redux 的同时安装 redux-looking-glass：
npm install --save-dev redux-looking-glass
使用
在你的 Redux Store 中添加以下代码：
-- -------------------- ---- ------- ------ - ---------------- - ---- ---------------------- ----- ----- - ------------ -------- ------------- ---------------------- -- ------------------------
然后使用启动项目：
npm start
运行之后，打开项目并在网页中增加以下参数：
?looking-glass
例如：http://localhost:3000/?looking-glass
接下来，你可以在开发过程中实时监测 Store 的状态，并在数据变化时及时响应。
示例
这里新建一个 TODO 应用程序来演示 redux-looking-glass 的使用。
设置 Store
我们首先创建 Store，该 Store 包括有一个包含 TODO 项的数组：
import { createStore } from 'redux';
import todos from './reducers/todos';
const store = createStore(todos, [{
id: 0,
text: 'Learn Redux',
completed: false,
}]);安装 redux-looking-glass
接下来，我们安装 redux-looking-glass：
npm install --save-dev redux-looking-glass
初始化 Store
在我们的应用程序中初始化 redux-looking-glass：
import { initLookingGlass } from 'redux-looking-glass';
initLookingGlass(store);然后启动项目：
npm start
在 App 组件中使用 Store
我们将使用 React 组件来处理 Store 数据和用户界面交互。在这里我们将 Redux 的 state 赋予或从中获得这些组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------------------
----- -------- - -- ------ ------- -- -- -
-----
-------- ---------
----
--------------- --
--- ------------------------------
--
-----
------- ---------- -- -----------------------
------
--
------------------ - -
------ ---------------------------
-------- --------------------------
--
----- --------------- - ----- -- --
------ ------
---
----- ------------------ - -
--------
--
------ ------- ------------------------ ------------------------------在这里，我们使用 state 将新的 list 传递到应用程序的 TodoList 组件中。
修改 Store
添加 TODO 项的代码如下所示：
-- -------------------- ---- -------
------ - -------- - ---- -------------------------------
-------- ------------ -
------ -
----- ---------
-------- -
--- -----------
----- ---- ---- ----- - ---- ----- ---------------------
---------- ------
--
--
-
------ ----- ------- - -- -- -------- -- -
-----------------------
--在这里，我们创建了一个 addTodo() 的函数，并将其进行映射。每当该函数被调用时，都会在添加一项新的 TODO 项。
效果
我们运行项目，打开 http://localhost:3000/?looking-glass 页面。当我们在点击 Add 按钮时，我们就可以在 redux-looking-glass 的 UI 中看到我们新加的 TODO 项。
总结
redux-looking-glass 提供了一种与 Redux DevTools 不同的选项，用于简化在开发时的调试。使用 redux-looking-glass 可以减少开发人员在条件分支不正确或网络请求失败时的迷惑和挫折感。
在实际开发中，我们可以使用 redux-looking-glass 来实时地检查我们的状态，并在 UI（用户界面）上看到变化。因此，redux-looking-glass 提供了一个极好的解决方案，它可以提供我们在开发程序时，并最终发布生产版本时更好的信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb581e8991b448da2d2