How to change the Redux state based on an Electron menu click?

Question

I'm building an Electron application based on React and Redux. I'm starting with the electron-react-boilerplate, which is pretty minimalistic and easy to understand.

I want the user to open a file on the Electron menu, and as a result, I want to call a reducer and change the Redux application state. Pretty simple concept.

The problem is that I don't know how to change the Redux state from outside my root component. The Electron menu is defined in the main.js file. The root component is defined in the index.js file, together with the Redux state (the store variable).

In the main.js file, I want to do something like this:

  submenu: [{
    label: '&Open',
    accelerator: 'Ctrl+O',
    click: function() {
        // I want to change my app Redux state here. But I don't know how.
    }
  }

Any idea?

Answer 1

You could obtain the filename in the main process and then send it to the renderer process via Electron IPC, for example:

In main.js

// mainWindow = new BrowserWindow();

submenu: [{
  label: '&Open',
  accelerator: 'Ctrl+O',
  click: () => {
    // popup a dialog to let the user select a file
    // ...
    // then send the filename to the renderer process
    mainWindow.webContents.send('open-file', selectedFilename);
  }
}]

In index.js

import { ipcRenderer } from 'electron';

ipcRenderer.on('open-file', (event, filename) => {
  store.dispatch({ type: 'OPEN_FILE', filename });
});

Answer 2

The other option is to build your menu on the renderer side (in index.js) using the remote module, then you could call the dispatcher directly from the click callback.