Framkeworks used: React + Redux + Electron (+ Express)
Suddently, in the place of the usual redux dev tools, an animation of concentric circles is shown.
(See screenshot)
Has anyone seen this before? Dev tools started behaving like this yesterday, before they were fine.
This is the function that loads the extensions in 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...........`);
}
});
this is my 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 };
relevant dependencies versions:
{
"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"
}
Considerations:
- There are no errors or warnings in the console (the ones you see in the image have been there since the beginning, months ago)
- Redux store is working normally
- No 'store could not be found' message shown.
- console logging window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ shows it exists
- Tried with window.__REDUX_DEVTOOLS_EXTENSION__ instead, same result
- console logging store.getState() returns the expected state
See if anybody has experienced this before and how they worked it out.. Happy to provide more info if needed.
Thanks peeps!
