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

Posted 2023-02-22

【中文标题】如何根据 Electron 菜单单击更改 Redux 状态？

【英文标题】：How to change the Redux state based on an Electron menu click?

【发布时间】：2016-06-02 10:57:01

【问题描述】：

我正在构建一个基于 React 和 Redux 的 Electron 应用程序。我从electron-react-boilerplate 开始，它非常简约且易于理解。

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

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

在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.
    
  

有什么想法吗？

【问题讨论】：

要更改应用程序状态，只需调用一个操作。在当前情况下不可能吗？

【参考方案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 );
);

【讨论】：

上帝保佑你的灵魂。

非常好的解决方案

【参考方案2】：

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