Redux-devtools 是一个开发工具，它提供了一些辅助开发的功能，使得开发人员更加容易调试和监控 Redux 应用。在这篇文章中，我们将介绍如何使用这个包，以及它提供的一些常见功能。
安装
你可以通过 npm 安装 redux-devtools：
npm install --save-dev redux-devtools
使用 --save-dev 选项安装，是因为我们只会在开发环境中使用这个包。在生产环境下，你不应该包含它。
使用
Redux-devtools 提供了一个 devToolsEnhancer，它是 Redux Store 的增强器。要使用这个增强器，你需要在创建 Store 的时候将它传递给 createStore 方法：
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools';
const store = createStore(myReducer, devToolsEnhancer());注意，devToolsEnhancer() 必须调用一次，才能创建增强器并传递给 createStore。
功能
下面介绍 redux-devtools 常见的功能。
时间旅行
redux-devtools 支持时间旅行。你可以回到任意一个 action 被触发的状态，并检查在那个时候每个 reducer 的状态。
在这个例子中，我们可以看到，在第一个 action 被触发时，todos reducer 的状态变为了一个包含了一个 todo 的数组。
监控当前状态
redux-devtools 提供了一个监控当前状态的功能，这对于调试来说很有用。你可以查看每个 reducer 的当前状态，并检查它们的数据结构是否与预期一致。
在这个例子中，我们可以看到 visibilityFilter 的值为 SHOW_ALL。
其他功能
redux-devtools 还提供了其他一些有用的功能，比如播放和暂停、跳转到任意状态等。如果你想了解更多，请查看官方文档：https://github.com/reduxjs/redux-devtools。
示例代码
下面是一个使用 redux-devtools 的示例代码，它实现了一个简单的 Todo List。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ---------------- - ---- -----------------
----- -------- - -----------
----- ----------- - --------------
----- --------------------- - ------------------------
----- ------- - -
--------- -----------
--------------- -----------------
------------ -------------
--
----- ------- - ---- -- -
------ - ----- --------- ---- --
--
----- ---------- - ----- -- -
------ - ----- ------------ ----- --
--
----- ------------------- - ------ -- -
------ - ----- ---------------------- ------ --
--
----- ------------ - -
------ ---
----------------- ----------------
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
----- ------------
---------- -----
-
-
--
---- ------------
------ -
---------
------ ---------------------- ------ -- -
-- ------ --- ------------- -
------ -
--------
---------- ---------------
--
-
------ -----
--
--
---- ----------------------
------ -
---------
----------------- -------------
--
--------
------ ------
-
--
----- ----- - -------------------- --------------------
--------------------------------
--------------------------------
------------------------------
------------------------------
------------------------------------------------------------结论
redux-devtools 是一个非常有用的工具，它可以帮助我们更容易地调试和监控 Redux 应用。在你的下一个 Redux 项目中，不要忘记使用它，这将大大提高你的工作效率！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67528