我写了一个包(假设PACKAGE_A
)来完成某些任务。然后PACKAGE_B
要求。 PACKAGE_A
是一些自动化工作的节点脚本。它具有此通告程序模块,用于创建和导出EventEmitter。 (整个项目是Monorepo)
const EventEmitter = require('events');
let myNotifier = new EventEmitter();
module.exports = myNotifier;
因此,在PACKAGE_A
中的某些函数中,它通过要求myNotifier
发出事件,并且在index.js
的{{1}}中,我导出函数(暴露给其他包的API )和PACKAGE_A
,只需再次输入即可。
myNotifier
然后,我将const myNotifier = require('./myNotifier);
const func1 = () => {
// some function
return something;
}
module.exports = {func1, myNotifier}
导入PACKAGE_A
中,并使用通知程序公开的API函数。 PACKAGE_B
是具有React UI的电子应用。
以下是该程序的工作方式。
我在电子应用程序中有一个控制台输出窗口(React UI, UI_A )。 <=(请记住这一点)
当我单击 UI_A 中的按钮时,它会触发 redux操作 (PACKAGE_B
) 。在动作内部,将通知发送到事件,该事件使用ipcRenderer在电子代码中进行监听。
button_action
然后在电子代码(index.js)中,我需要另一个文件(ipcRenderer.send('button-clicked', data); // <= this is not the full code of the action. It's bellow.
,该文件在电子侧包含与 UI_A 相关的代码)。原因是代码分离。这是UI_A_COM.js
中与电子有关的部分代码。
index.js
好的。然后在const ui_a_com = require('./electron/UI_A_COM');
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
resizable: false,
});
mainWindow.loadURL('http://localhost:3000');
const mainMenu = Menu.buildFromTemplate(menuTemplate);
ui_a_com (mainWindow);
};
中,我听那个触发的事件UI_A_COM.js
。
ipcMain.on('button-clicked',someFunction);
从button-clicked
运行代码并返回结果。因此,现在PACKAGE_A
运行时,它会使用PACKAGE_A
发出一些事件。我在同一个文件(myNotifier
中收听它们,当捕获到这些事件时,我再次将一些事件发送到React UI,当UI_A_COM.js
被触发时,该事件将被订阅。
button_action
这是操作的完整代码。 (由于您会感到困惑,所以没有提早提供)
myNotifier.on('pac_a_event_a', msg => {
mainWindow.webContents.send('ui_event_a', msg); // code in `UI_A_COM.js`
});
这将在 UI_A 控制台中显示消息。
这是我正在做的任务。问题是当我单击按钮时。它第一次完美运行。但是,当我第二次单击该按钮时,它收到了两条消息。然后,当我再次单击该按钮时,三则消息不断增加。 (但PACKAGE_A中的功能每按一次按钮仅执行一次)。
比方说,从export const buttonAction = runs => {
return dispatch => {
ipcRenderer.send('button-clicked', data);
ipcRenderer.on('ui_event_a', (event, msg) => {
dispatch({ type: SOME_TYPE, payload: { type: msg } });
});
};
};
发出的消息是每次执行时“ Hello there”。
当我第一次按下按钮时,结果很理想=>你好,当我再次单击按钮时=>你好,那里你好,当我再次单击它=>你好,那里你好。
一直保持下去。我认为我对EventEmitter的实现有些流程。那么为什么会这样呢?是EventEmitter还是其他?我在这里做什么错了?
答案 0 :(得分:0)
我认为您应该返回在组件的ipcRenderer.removeAllListeners()
中调用useEffect()
的函数。
因为每次单击自定义按钮时都会调用ipcRenderer.on(channel, listener)
,所以您需要为该通道agin和agin设置监听器...
示例:
useEffect(() => {
electron.ipcRenderer.on('myChannel', (event, arg) => {
dispatch({ type: arg });
});
return () => {
electron.ipcRenderer.removeAllListeners('myChannel');
};
});