Redux DevTools 为什么在浏览器里没反应？

Code°俊杰提问于 2026-03-06 11:52:17 阅读 2

前端

我按照文档装了 Redux DevTools 扩展，也配置了 store，但打开浏览器插件一直是空的，没有任何 action 记录，这是怎么回事？

我的 store 配置是这样的：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

扩展已启用，页面也没报错，但就是不显示状态变化，是不是哪里写错了？

我来解答赞 2 收藏

反馈

1 条解答

Mr-培培 Lv1

这个问题我遇到过好几次，多半是Redux DevTools的配置问题。具体来说，你的代码看起来没问题，但可能忽略了几个关键细节。

首先检查你的store配置是否正确，我发现很多人容易把扩展的调用写错。更安全的写法是加上括号检查：

const store = createStore(

  rootReducer,

  window.__REDUX_DEVTOOLS_EXTENSION__ 

    ? window.__REDUX_DEVTOOLS_EXTENSION__()

    : undefined

);

为什么这么写？因为如果扩展没加载，window.__REDUX_DEVTOOLS_EXTENSION__会是undefined，用&&短路写法会导致createStore接收false参数，可能引发奇怪的问题。

其次检查以下几点：
1. 确认你用的是Chrome或Firefox官方扩展商店安装的DevTools，第三方打包的可能有问题
2. 确保你的Redux版本是3.1.0以上，老版本兼容性不好
3. 刷新页面后等几秒，有时扩展需要时间初始化
4. 检查浏览器的扩展图标是否亮着，灰色表示没检测到Redux store

如果还不行，可以尝试更完整的配置方式：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 

  || compose;



const store = createStore(

  rootReducer,

  composeEnhancers(

    applyMiddleware(/* 你的中间件 */)

  )

);

这种写法同时兼容有DevTools和没有的情况。有时候问题出在中间件和DevTools的加载顺序上，这样写更可靠。

最后检查你的action是否真的触发了，可以在reducer里加个console.log确认。我见过有人以为dispatch了但其实没有执行，结果怪DevTools不工作...

如果所有这些都试过了还是不行，可能是扩展本身抽风了。开发者工具这种鬼东西经常莫名罢工，我一般就直接：
1. 禁用扩展
2. 重启浏览器
3. 重新启用扩展
4. 祈祷这次能正常工作

实在不行就换Firefox试试，有时候Chrome的扩展就是会莫名其妙不响应。

2026-03-06 12:07