基于Node的React/Redux应用连接Redux Dev Tools问题求助

1. 修正Redux Toolkit的Enhancers配置 #

Redux Toolkit的configureStore中，enhancers参数需为数组形式，直接传入devToolsEnhancer会导致配置错误，同时要避免内置DevTools与远程工具冲突：

// 务必在所有导入前设置环境变量
process.env.NODE_ENV = 'development';

import { configureStore } from '@reduxjs/toolkit';
import { devToolsEnhancer } from 'remote-redux-devtools';

const store = configureStore({
  reducer: {
    // 这里的key要和你的reducer名称对应，比如你的reducer叫todoReducer，就写todo: todoReducer
    yourReducerKey: reducer 
  },
  // 禁用内置DevTools，防止冲突
  devTools: false,
  // enhancers需通过数组整合默认增强器与远程工具增强器
  enhancers: (defaultEnhancers) => [
    ...defaultEnhancers,
    devToolsEnhancer({
      hostname: 'localhost',
      port: 8000, // 与Chrome扩展设置的端口保持一致
      realtime: true
    })
  ]
});

2. 确认Reducer的初始状态与结构 #

检查你的reducer是否正确定义了初始状态，且configureStore的reducer对象中key与reducer的对应关系无误。若reducer初始状态存在，但配置时用了模糊的reducer: { reducer }，会导致store结构异常，DevTools无法识别状态。

3. 调整渲染与store创建的顺序 #

确保store创建完成后再启动React-Blessed渲染，避免渲染时store未初始化：

// 先创建store
const store = configureStore(...);

// 再执行渲染逻辑
export function start() {
  render(<Provider store={store}><App /></Provider>, screen);
}

4. 验证Chrome扩展的连接设置 #

• 打开Redux DevTools扩展，进入「Settings」页面
• 确认「Remote」选项下的Host为localhost、Port为8000，与代码配置一致
• 勾选「Use local connection」
• 重启扩展与Node应用，清除可能的缓存问题

内容的提问来源于stack exchange，提问作者Zach_is_my_name