Github Redux Devtools - Javascript

如果你正在使用 Redux.js 来管理你的应用程序的状态，那么你一定会想要更好地掌握Redux状态的变化。而 Github Redux Devtools 是你需要的解决方案！

什么是Redux Devtools?

Redux Devtools 是为 Redux 开发的浏览器扩展程序和 React Native 功能。使用Redux Devtools，你可以更好地可视化和调试你的Redux状态，它允许你：

• 时间旅行: 回到那些 Redux 的状态上次改变的时刻，让你可以重新审视以前的 action 和 state。

• 捕捉事件: 在更改状态时，DevTool会记录重要的事件，如时间戳、action 类型和 payload。

• 可视化: 在 Chrome 控制台中显示状态树，让你能够更好地理解应用程序状态，以便更好地调试和观察状态变化。

• 监控性能: 查看应用程序中 action 运行时、状态的更改以及访问 reducer 时需要的时间，以便更好地了解性能瓶颈并进行优化。

安装和配置Redux Devtools

安装 Redux Devtools 非常简单。首先，在 Chrome Web Store（或其他基于 Chromium 的浏览器）中安装 Redux Devtools 扩展程序。然后，在 Redux createStore 后添加一个 applyMiddleware():

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

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middleware),
  ),
);

使用applyMiddleware让我们添加任何中间件，并在参数中传入 composeWithDevTools 允许我们使用DevTools。

使用Redux Devtools

安装并正确配置完 Redux Devtools 后，它会自动启动和运行。要打开Devtools，请：

• 在浏览器中打开 Redux Devtools
• 确保基于 createStore 和 applyMiddleware 进行的状态始终开启，并启用 JS/CSS 重新加载。
• 如果你是在 React Native 上工作，则可以通过 Reactotron 或 Redux Debugger 进行调试，这些工具都可以与 Redux Devtools 集成。

结论

Redux Devtools 是一个出色的解决方案，它给予你掌握JavaScript和了解应用程序状态的能力。它的可视化特性，帮助程序员 debug 问题，并优化应用程序性能。要安装并配置Redux Devtools，只需简单地按照上述步骤完成即可。享受你更高效的开发！