如何根据 Electron 菜单点击更改 Redux 状态？

Question

我正在构建一个 Electron application based on React and Redux. I'm starting with the electron-react-boilerplate，它非常简约且易于理解。

我希望用户在 Electron 菜单上打开一个文件，结果我想调用一个 reducer 并更改 Redux 应用程序状态。很简单的概念。

问题是我不知道如何从根组件外部更改 Redux 状态。 Electron 菜单在 main.js file. The root component is defined in the index.js file 中与 Redux state（store 变量）一起定义。

在 main.js 文件中，我想做这样的事情：

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

有什么想法吗？

Answer 1

可以在主进程中获取文件名，然后通过Electron IPC发送给渲染进程，例如：

在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);
  }
}]

在index.js

import { ipcRenderer } from 'electron';

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

Answer 2

另一种选择是使用 remote 模块在渲染器端（在 index.js 中）构建菜单，然后您可以直接从点击回调中调用调度程序。

如何根据 Electron 菜单点击更改 Redux 状态？

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

javascript

reactjs

electron

redux