npm 包 local-redux-devtools 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，状态管理是非常关键的一部分。Redux 是一个流行的 JavaScript 应用程序状态容器，可以提供可预测性、可测试性和可扩展性。配合 Redux DevTools，我们可以更加方便地调试和监控状态的变化。而 local-redux-devtools 是一个基于本地存储的 Redux DevTools 插件，方便我们在开发过程中实时查看应用程序状态的变化。

1. 安装和基础配置

使用 npm 安装 local-redux-devtools：

npm install local-redux-devtools

在 Redux store 中添加 local-redux-devtools：

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, composeWithDevTools());

通过 composeWithDevTools 包裹 createStore，就可以将 Redux DevTools 集成到应用程序中。

import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, composeWithDevTools());

如果你不想在生产环境中使用 Redux DevTools，可以将 composeWithDevTools 从生产依赖项中移除，并使用 compose 替代它。

2. 高级配置

local-redux-devtools 提供了一些高级配置选项，可以满足特定的开发需求。

2.1. maxAge

maxAge 设置了存储在本地存储中的时间轴状态最大数量。默认值是 50。

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, undefined, composeWithDevTools({
  maxAge: 100,
}));

2.2. shouldRecordChanges

shouldRecordChanges 是一个函数，用于判断是否应该记录状态变化。默认情况下，它将记录每一个状态变化。

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, undefined, composeWithDevTools({
  shouldRecordChanges: (state, action) => action.type === 'INCREMENT',
}));

在上面的代码中，shouldRecordChanges 会在 INCREMENT action 触发时记录状态变化。

2.3. shouldStartLocked

shouldStartLocked 设置了 DevTools 是否应该在锁定状态下启动。默认情况下，它是 false。

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, undefined, composeWithDevTools({
  shouldStartLocked: true,
}));

在上面的代码中，DevTools 在启动时会处于锁定状态。

3. 示例

下面是一个使用 local-redux-devtools 的简单示例：

-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------------
------ - ----------- - ---- --------

----- ------------ - -
  ------ --
--

----- ------- - ------ - ------------- ------- -- -
  ------ ------------- -
    ---- ------------
      ------ - --------- ------ ----------- - - --
    ---- ------------
      ------ - --------- ------ ----------- - - --
    --------
      ------ ------
  -
--

----- ----- - -------------------- ---------- -----------------------

----- --------------- - - ----- ----------- --
----- --------------- - - ----- ----------- --

--------------------------------
--------------------------------
--------------------------------

在浏览器中打开 Redux DevTools，并查看 console 中的日志，可以看到状态变化的历史记录。即便页面刷新后，也可以在 DevTools 中看到之前的状态变化历史记录。

4. 总结

在这篇文章中，我们讲解了 local-redux-devtools 的安装和配置，以及一些高级配置选项。我们还通过示例演示了如何使用 local-redux-devtools 监控状态变化。学习并使用 local-redux-devtools，可以大大提升我们的开发效率和质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055db081e8991b448db703