Redux DevTools图书搜索应用程序的一些功能（用于在应用程序以前的状态中移动的历史滑块和箭头按钮，以及当前状态的显示视图）不是图书搜索所独有的。您可以提取这些特性的代码，将它们用在其他应用程序中。您可能会怀疑，某人（Redux 的实现者）通过实现 完成了类似的工作。
图 3 显示了 ，该扩展是在 Redux DevTools 上构建的。
图 3. Redux DevTools Chrome 扩展
图 3 显示了日志监视器窗格，默认情况下，它显示了状态历史，还提供了一个滑块和箭头按钮。目前为止，您应该已经很好地理解了这些特性是如何实现的。
图 4 显示了 Chart 窗格，它提供了应用程序状态的图形表示。将鼠标悬停在状态中的单个数据上时，就可以在一个弹出窗口中看到该数据的表示，在图 4 中也可以看到该数据表示。
图 4. 使用 Redux DevTools Chrome 扩展了解状态
Redux DevTools Chrome 扩展的使用很简单。根据该扩展的 中的介绍，安装该扩展后，必须对应用程序的代码执行一处更改。对于图书搜索应用程序，它使用了自定义中间件，所以您只需修改对 Redux 的 createStore() 函数的调用，如清单 15 所示。
清单 15. book 组件 (store.js)1
2
3
4
5
6
| import { createStore, applyMiddleware, compose } from 'redux';
import reducers from './reducers';
import { logger, thunk } from './middleware';
export default createStore(reducers, compose(applyMiddleware(logger, thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f));
|
随后，当您在 Chrome 中打开开发人员工具时，您会看到一个 Redux 选项卡。单击该选项卡就会显示该扩展。
Redux DevTools 通过提供一组强大的调试工具，使 Redux 变得更加强大。但这不是 Redux 提供的全部优势。Redux 还催生了一个繁荣的生态系统。 |
