Redux 是一种非常流行的前端数据管理工具，它的核心思想是单向数据流。在 Redux 中，我们通过 actions 发起对 store 的更新请求，store 根据 reducer 来更新自己的状态，然后通过 Provider 把状态注入到 React 组件中。但是，有时候我们会发现 Redux 的调试并不是那么容易，特别是当我们需要调试一些非常复杂的数据流。这时候，我们就需要 Redux 提供的时间旅行工具了。
时间旅行工具是什么
Redux 提供了一个叫做 redux-devtools 的插件，它是一个浏览器开发工具，可以让我们追踪 Redux store 中的状态变化。通过时间旅行工具，我们可以在 store 的历史记录中来回切换，查看每个时间点上 store 的状态，从而更好地理解应用程序的状态变化和行为。这对于调试复杂的 Redux 应用程序和问题排查非常重要。
时间旅行工具的使用
安装
使用时间旅行工具首先需要安装它。可以使用 npm 命令进行安装：
npm install --save-dev redux-devtools
连接到 store
一旦安装了 redux-devtools，我们需要把它连接到我们的 Redux store。为了实现这个目标，我们需要用 compose() 函数来包装我们的 store，并将 redux-devtools 集成到应用程序中。为此，我们可以使用 redux-devtools-extension 包中提供的 composeWithDevTools() 方法。 下面是一个简单的例子：
import { createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from './reducers'; const store = createStore( rootReducer, composeWithDevTools(), );
这样我们就成功地连接了时间旅行工具到我们的 Redux store 中。
使用时间旅行工具
连接好时间旅行工具之后，我们就可以在开发者工具中切换到 Redux 面板。这里可以看到 store 的状态历史记录以及当前 store 中的所有状态。如果你通过代码派生出了新的状态 (例如一个 reducer 执行)，它们将立即显示在历史记录中。
在时间旅行工具中，你可以进行以下操作：
回浏览历史记录：单击历史记录中的某个状态，即可查看该状态下的应用程序
前浏览历史记录：点击“Next”按钮即可前浏览历史记录。
跳转到任意状态：输入状态的编号来跳转到任何特定状态。
直接修改 store 中的状态：你可以直接更改当前所选择的状态，但这样操作容易引起数据的混乱和破坏性，我们不推荐这种做法。
Redux 调试必备：时间旅行工具小结
在本文中，我们了解了 Redux 时间旅行工具及其如何帮助我们调试 Redux 应用程序。我们一步步地讲解了连接时间旅行工具到 Redux store 的方法，以及如何使用它来查看应用程序的状态历史记录，甚至可以实现前浏览或回浏览历史记录。最后，我们强调了不要直接修改 store 中的状态的重要性。希望通过本文的学习，你能够更好地调试 Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67949ef6504e4ea9bd9371f7
