Support: Redux-Devtools Saying 'No Store Found' after Hot Reload in Electron

[dgildeh]

I'm using redux-toolkit to create a store for a React.js application in Electron.js with the following configuration:

store.ts

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import createSagaMiddleware from 'redux-saga'

import rootReducer from './reducers'
import sagas from './sagas'

const sagaMiddleware = createSagaMiddleware()

const store = configureStore({
  reducer: rootReducer,
  devTools: true,
  middleware: [
    ...getDefaultMiddleware({ serializableCheck: false }),
    sagaMiddleware,
  ],
  preloadedState: undefined,
})

sagaMiddleware.run(sagas)

export default store

When Electron first starts in 'dev' mode, the Redux-Devtools extension loads showing the store state/actions as expected. As soon as I edit any component and the app recompiles/hot reloads, when the app refreshes the Redux-Devtools extension shows a blank screen with 'No Store Found'.

The store still works with the app components after the hot reload, it appears the only problem is the Devtools extension can't find the store.

Any ideas?

[mauriciomassaia]

Im having exactly the same issue, if you dont reload it works fine.

Dependencies:

• "electron": "^13.1.0"
• "electron-devtools-installer": "^3.2.0"
• "redux-devtools-extension": "^2.13.9"
• "@reduxjs/toolkit": "^1.6.1"
• node v14.17.5

This is how I setup the extension on main process:

const { default: installExtension, REDUX_DEVTOOLS } = require('electron-devtools-installer')
installExtension(REDUX_DEVTOOLS, {
  loadExtensionOptions: { allowFileAccess: true },
  forceDownload: false
})
  .then((name) => console.log(`Added Extension:  ${name}`))
  .catch((err) => console.log('An error occurred: ', err))

this is my setup on store.ts

import { configureStore } from '@reduxjs/toolkit'
import { appReducer } from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'

const composeEnhancers = composeWithDevTools({})
const store = configureStore({
  reducer: appReducer,
  enhancers: composeEnhancers
})

export type RootState = ReturnType<typeof store.getState>

export default store

[freddiehaddad]

I noticed that if I close and open the dev tools window (Ctrl+Shift+I), the Redux DevTool extension is reconnected. So I just modified my main.js file as follows:

const createWindow = () => {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
		width: 1920,
		height: 1080,
		autoHideMenuBar: true,
	});

	// and load the index.html of the app.
	mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

	// Open the DevTools.
	mainWindow.webContents.on('did-frame-finish-load', () => {
		// We close the DevTools so that it can be reopened and redux reconnected.
		// This is a workaround for a bug in redux devtools.
		mainWindow.webContents.closeDevTools();
		
		mainWindow.webContents.once('devtools-opened', () => {
			mainWindow.focus();
		});
		
		mainWindow.webContents.openDevTools();
	});
};

Specifically, I added...

// We close the DevTools so that it can be reopened and redux reconnected.
// This is a workaround for a bug in redux devtools.
mainWindow.webContents.closeDevTools();

[dyllandry]

This is happening to me as well. Makes it pretty tedious to have to reopen dev tools every time I edit something.

Also @freddiehaddad solution above doesn't work anymore with my versions.

Dependencies:

"electron": "22.0.0",
"electron-devtools-installer": "^3.2.0",
"@reduxjs/toolkit": "^1.9.1",
node v19.2.0