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 还催生了一个繁荣的生态系统。
Redux 生态系统概览Redux 生态系统包含以下存储库：
Redux 生态系统中的一些库（比如 redux-form）是特定于 React 的；其他库（比如 redux-logic）仅需要 Redux。
众所周知，Redux 使用操作和 reducer 来维护状态。给定当前状态和一个操作，操作描述状态更改，reducer 根据当前生成一个全新的状态。对于同步操作，这个简单模型就够了，但正如您在 “” 中看到的，它没有考虑异步操作。
异步操作是一种特殊的类的副作用，之前这些与 Redux 相关的存储库（redux-form 除外，它使用 Redux 存储 React 表单状态）都用于管理副作用。这些库有助于实现一些特性，比如去除抖动，图书搜索应用程序没有实现该特性（但根据 redux-logic 的作者在对 “” 的评价中所指出的，应该实现该特性）。有了 redux-saga，您可以熟悉 效果；而有了 redux-observable，您可以了解如何将观察结果与 Redux 相集成。对 Redux 生态系统的进一步讨论不属于本系列的讨论范围。
结束语尽管不是一个吸引人的主题，但状态管理是任何应用程序的最重要方面之一。在编写本文时，Redux 在 GitHub 上拥有 22,000 颗星和 3,500 个分支，是最流行的 JavaScript 存储库之一。
Redux 如此流行是因为，它使状态管理变得可预测，显著减少了应用程序中的错误数量。Redux 也是一个可用于任何 UI 框架的简单 JavaScript 库。在本系列中，您看到了如何使用 Redux 维护同步和异步操作，还看到了可同时用于 React 和 Angular 的相同的 Redux 代码。Redux DevTools 和 Redux 生态系统使 Redux 变得更加振奋人心。 |
