使用的 Framkeworks:React + Redux + Electron (+ Express)
突然,在通常的 redux 开发工具的位置,显示了同心圆的动画。
(见截图)
有没有人见过这个?开发工具昨天开始表现得像这样,之前还没有问题。
这是在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.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 };
相关依赖版本:
{
"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 store 工作正常
- 未显示“找不到商店”消息。
- 控制台日志记录窗口.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 显示它存在
- 尝试使用 window.__REDUX_DEVTOOLS_EXTENSION__ 代替,结果相同
- 控制台日志记录 store.getState() 返回预期状态
看看是否有人以前经历过这种情况以及他们是如何解决的。如果需要,很乐意提供更多信息。
谢谢窥视!