React+Redux+Electron项目Redux DevTools显示同心圆动画异常

环境信息 #

使用技术栈：React + Redux + Electron（配套Express服务）
相关依赖版本：

{
      "electron": "13.5.1",
      "electron-context-menu": "3.1.1",
      "electron-devtools-installer": "3.2.0",
      "react": "17.0.2",
      "react-redux": "7.2.4",
      "redux": "4.1.0",
      "redux-thunk": "2.3.0"
}

问题现象 #

此前一直正常运行的Redux DevTools从昨天开始出现异常，打开后仅显示同心圆动画，无法正常加载面板内容，如下图：

相关代码 #

Electron主进程加载扩展逻辑（electron/main.ts） #

const addReactReduxDevTools = async (): Promise<void> => {
    const options = {
        loadExtensionOptions: { allowFileAccess: true },
    };
    try {
        const reactDevTools = await installExtension(REACT_DEVELOPER_TOOLS, options);
        console.log(`Extension: ${reactDevTools}....${colors.magenta}`, 'added!');
        const reduxDevTools = await installExtension(REDUX_DEVTOOLS, options);
        console.log(`Extension: ${reduxDevTools}...........${colors.magenta}`, 'added!');
    } catch (err) {
        console.log(`${colors.red}An error occurred`);
        console.log(err);
    }
};

app.whenReady().then(async () => {
    if (withDevTools) {
        await addReactReduxDevTools();
        console.log(`${colors.cyan}React dev server starting...........`);
    }
});

Redux Store初始化逻辑（redux/store.ts） #

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunk from 'redux-thunk';
import { routerMiddleware } from 'connected-react-router';
import reducers from '../reducers';
import { routerReducer as router, history } from '../reducers/router';

const slices = combineReducers({
    appState: combineReducers(reducers),
    router,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? /* istanbul ignore next */
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          trace: true,
          traceLimit: 25,
      })
    : compose;

const middlewares = [applyMiddleware(thunk, routerMiddleware(history))];

export const store = createStore(slices, composeEnhancers(...middlewares));
export { history };

已排查内容 #

• 控制台无新增错误或警告（截图中可见的报错已存在数月，和本次问题无关）
• Redux store本身运行完全正常，业务逻辑无异常
• 未出现“store could not be found”的常见接入错误提示
• 打印window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__确认该全局属性正常存在
• 尝试改用window.__REDUX_DEVTOOLS_EXTENSION__方式接入DevTools，问题依旧
• 打印store.getState()返回的状态数据完全符合预期
  如有相关解决方案可直接回复，如需补充更多信息可随时提出。

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