Redux DevTools Extension

简介

Redux DevTools Extension 是一款用于调试和开发 Redux 应用的浏览器插件。它可以帮助开发者轻松地追踪应用状态、行动、时间旅行等，为调试 Redux 应用提供了很大的便利性。

Redux DevTools Extension 可以与 Chrome、Firefox、Edge、Safari 等多款现代浏览器集成，支持多种不同的 Redux 实现（包括 Redux、React-Redux、Redux-Saga、Redux-Thunk 等），可通过基本的 Key binding、快捷命令等方式来操作，非常易用。

特性

• 实时追踪 Redux 应用的状态、行动、历史记录等；
• 支持多种 Redux 实现，包括 Redux、React-Redux、Redux-Saga、Redux-Thunk 等；
• 易于集成和操作，可以通过快捷键和命令行来辅助调试；
• 可以保存和共享应用状态，为团队协作和调试提供便利性；
• 提供强大的过滤和搜索功能，可以快速定位到需要查找的状态和行动。

安装方式

Redux DevTools Extension 可以通过 npm 仓库下载和安装：

npm install redux-devtools-extension

或者可以直接在浏览器的官方扩展库中查询并添加对应的插件：

• Chrome
• Firefox
• Edge
• Safari

使用方法

在使用 Redux DevTools Extension 之前，需要先配置和启用对应的 Redux 开发工具。具体步骤可以参考官方文档中的 Getting Started with Redux DevTools。

接着，在应用中引入 Redux DevTools Extension 并添加到 Redux 中间件中即可：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(thunk))
);

然后，在浏览器中打开对应的开发者工具，即可看到 Redux DevTools Extension 的调试面板：

快捷操作

Redux DevTools Extension 提供了一些常用的快捷键和命令行操作，使调试更加方便和高效。

快捷键操作

• Ctrl + H：打开/关闭 DevTools 面板；
• Ctrl + Q：切换 DevTools 面板的位置；
• Ctrl + P：显示历史记录面板；
• Ctrl + O：提交一个自定义的 Redux 行动；
• Ctrl + S：保存当前应用状态；
• Ctrl + Shift + S：加载保存的应用状态；
• Ctrl + W：关闭当前面板；
• Ctrl + R：重置当前面板；
• Ctrl + Z：撤销上次操作；
• Ctrl + Y：重做上次操作；
• ↑/↓：在历史记录中上一个/下一个入口。

命令行操作

• dispatch(action)：手动派遣一个 Redux 行动；
• getState()：获取当前的 Redux 状态树；
• subscribe(listener)：添加一个状态变化的监听器；
• replaceReducer(nextReducer)：替换当前使用的 Redux reducer。

其他资源

• Redux DevTools Extension 官方文档
• Redux 官方文档
• React-Redux 官方文档
• Redux-Saga 官方文档
• Redux-Thunk 官方文档