为什么Redux DevTools显示空状态但没报错？

这个问题其实挺常见的，很多新手都会遇到类似的困惑。咱们一步步来排查和解决。

首先，Redux DevTools显示空状态可能有几个原因，咱们一个一个来看。你的代码里确实写了 devTools: true，但这只是告诉 Redux 开启支持 DevTools 的功能，但并不等于 DevTools 就一定能正常工作。原理是这样的：Redux DevTools 需要通过 Redux 的中间件机制来监听 store 的状态变化，如果某些地方配置有问题，它就拿不到数据。

第一个排查点是 configureStore 的用法。你提到使用了 devTools: true，但如果你用了 composeWithDevTools，这两者其实是冲突的。简单来说，devTools: true 已经自动帮你处理了 DevTools 的集成，而 composeWithDevTools 是手动增强 store 的方式，两者一起用会导致问题。所以建议你去掉其中一个，推荐直接用 devTools: true，因为它是更现代的做法。

第二个排查点是你的 rootReducer 是否正确导出了。Redux 的状态树是由 reducer 定义的，如果 rootReducer 没有正确定义初始状态，那么整个 store 就会是一个空对象。你可以打印一下 rootReducer 的返回值，看看是不是符合预期。比如这样：

console.log(rootReducer(undefined, { type: 'INIT' }));

这个代码会模拟一个初始化的 action，看看你的 reducer 是否返回了正确的初始状态。如果没有返回状态，或者返回了一个空对象，那问题就出在 reducer 上。

第三个排查点是检查你的项目是否真的引入了 Redux DevTools 扩展。虽然你提到扩展已经打开了，但有时候浏览器插件可能并没有正确加载。可以试试在 store 配置中加一个日志中间件，看看有没有输出。比如这样：

import { configureStore } from '@reduxjs/toolkit';

import logger from 'redux-logger';



const store = configureStore({

  reducer: rootReducer,

  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger), // 添加日志

  devTools: true,

});

这段代码会在控制台打印每次 state 的变化。如果能看到日志输出，说明 store 是正常工作的，问题可能还是在 DevTools 本身。

第四个排查点是检查你的 React 组件是否正确连接了 Redux。如果你用了 useSelector 或 connect，确保它们能够正确获取到 state。如果组件没拿到数据，也可能导致你觉得 DevTools 没生效。

最后，我再补充一个小细节。有时候 Redux Toolkit 的版本问题也会导致奇怪的行为。建议你检查一下 @reduxjs/toolkit 和 react-redux 的版本是否匹配。如果不确定，可以升级到最新版本试试。比如这样：

npm install @reduxjs/toolkit@latest react-redux@latest

总结一下，按照以下步骤排查：
1. 确保没有同时使用 devTools: true 和 composeWithDevTools
2. 检查 rootReducer 是否返回了正确的初始状态
3. 加入日志中间件确认 store 是否正常工作
4. 确保 React 组件正确连接了 Redux
5. 更新依赖包到最新版本

如果按这些步骤走一遍，问题基本就能解决了。如果还有问题，随时可以继续问。

省事的话，你应该是忘记在 configureStore 里正确启用 DevTools 了。虽然你写了 devTools: true，但这玩意其实默认就是开的，关键是你得确保 composeWithDevTools 被正确调用。改一下你的代码：

import { configureStore, combineReducers } from '@reduxjs/toolkit';

import { composeWithDevTools } from 'redux-devtools-extension';



const rootReducer = combineReducers({

  // 你的reducer

});



const store = configureStore({

  reducer: rootReducer,

  enhancers: (defaultEnhancers) => [

    ...composeWithDevTools()(defaultEnhancers)

  ]

});

这样应该能直接看到状态了，别折腾那些没用的配置了。