将 React + Redux + MUI 菜单转换为 Electron答案

【问题标题】：Converting a React + Redux + MUI Menu to Electron将 React + Redux + MUI 菜单转换为 Electron
【发布时间】：2022-07-26 13:25:19
【问题描述】：

我正在尝试将基于 Web 的 React + Redux + MUI 应用程序转换为 Electron。该应用程序有一个带有多个下拉菜单的主 AppBar，其中的菜单项连接到应用程序的 Redux 商店。因此，这些技术的合作设置相当典型，但我很难理解如何将其（如果可能的话）转换为 Electron 应用程序菜单。

如果我有一个带有典型 onClick 处理程序的 MUI MenuItem，如下所示：

const [soneState, setSomeState] = useState();

const handleOnClick = (e) => {
  const val = e.target.value;
  console.log(`The value is ${val}`);
  setSomeState(val);
}

电子菜单的等价物是什么？还假设我正在利用 Redux 存储，而不是本地组件状态。菜单中的许多处理程序通过fetch 与 Express 服务器通信。我一直在通过contextBridge 阅读有关 Electron 进程间通信的信息，但我不确定 Electron 菜单属于该等式的哪一侧。它能否同时利用 Redux 存储以及与主进程对话？我想我不能从菜单中拨打fetch 电话？

【问题讨论】：

标签： javascript reactjs material-ui electron

【解决方案1】：

好吧，我想我明白了……

我可以使用官方文档here 中描述的模式在我的preload.js 中创建一个API，然后应用程序菜单可以调用该API 以向渲染进程发送消息。所以在preload.js 我有：

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('api', {
  loadSomeFile: (callback) => ipcRenderer.on('load-some-file', callback),
})

然后我这样定义我的菜单：

const { app, Menu, MenuItem, ipcMain } = require('electron');

module.exports = (window) => {
  return Menu.buildFromTemplate([
    {
      label: 'File',
      submenu: [
        {
          label: 'About',
        },
        {
          label: 'Preferences',
        },
        {
          type: 'separator'
        },
        {
          label: 'Load Some File',
          click() {
            window.webContents.send('load-some-file', 1);
          }
        },
        {
          type: 'separator'
        },
        {
          label: 'Exit',
          click() {
            app.quit()
          }
        }
      ]
    },
  ])
}

在我的main.js 我有：

const { app, BrowserWindow, Menu, } = require('electron');
const path = require("path");
const mainMenu = require("./app/main-menu");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  win.loadURL("http://localhost:8080");
  return win;
}

app.whenReady().then(() => {
  const win = createWindow();
  Menu.setApplicationMenu(mainMenu(win));
});

我在 React/Redux/MUI 前端代码中已有的大部分内容可以保持不变。但我需要从前端的 window 对象访问 api，并监听来自主进程的事件（如来自应用程序菜单）。

window.api.loadSomeFile((event, data) => {
  console.log(data);
});

经过测试，效果很好。我的代码几乎没有实际更改。

【讨论】：