Blog>
Snippets

Debugging Redux in Electron

Give an example of integrating Redux DevTools extension in an Electron app for debugging state changes and actions dispatches within the renderer process.
const { app, BrowserWindow } = require('electron');
const { default: installExtension, REDUX_DEVTOOLS } = require('electron-devtools-installer');

function createWindow() {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // Load app's index.html
  win.loadFile('index.html');

  // Open the DevTools for debugging.
  // DevTools will be open only when the app is not packaged for production.
  if (process.env.NODE_ENV === 'development') {
    win.webContents.openDevTools();

    installExtension(REDUX_DEVTOOLS)
      .then((name) => console.log(`Added Extension:  ${name}`))
      .catch((err) => console.log('An error occurred: ', err));
  }
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit();
});
This JavaScript code shows how to create an Electron BrowserWindow and integrates Redux DevTools for debugging in the renderer process. Redux DevTools is only installed and opened if the app is running in development mode. Note that nodeIntegration is enabled in webPreferences for this example, but in a production app one might want to use contextIsolation and a preload script for better security.