reactjs - 使用 React、Redux、Electron 将函数传递给 ipcMain 并返回的解决方法

Question

我正在尝试在我的应用程序中的某些时间从本地数据库文件加载/更新数据。这个文件当然必须从主进程访问，所以我从渲染器发送到主进程，然后当主进程返回我需要的数据时，我需要运行 Redux 的调度来相应地更新我的状态。问题是我的 ipcRenderer.on() 监听器没有正确调用调度的上下文。我尝试将一个函数传递给主进程，然后返回给渲染器，但函数从 ipcRenderer.send 中被剥离。

从主进程收到数据后，如何正确更新状态？下面是我的代码的孤立 block 。

主要工艺:

ipcMain.on('getSites', (event, args) => {
  db.sites.find({}, (err, docs) => {
    event.sender.send('getSitesSuccess', { data: docs, dispatch: args.dispatch });
  });
});

渲染器过程:

ipcRenderer.on('getSitesSuccess', (event, args) => {
  args.dispatch(args.data);
});

class SiteList extends Component {
  componentWillMount() {
    ipcRenderer.send('getSites', {
      test: 'test',
      dispatch: (data) => { this.props.dispatch(actions.change('sites', data)); }
    });
  }
}

Answer 1

确保在类实例 (componentDidMount) 中设置了事件监听器。此外，请确保在实例处理 (componentWillUnmount) 后正确处理任何事件监听器。

class SiteList extends Component {
  componentDidMount() {
    ipcRenderer.on('getSitesSuccess', this.handleSitesSuccess);
  }

  componentWillUnmount() {
    ipcRenderer.removeListener('getSitesSuccess', this.handleSitesSuccess);
  }

  handleSitesSuccess(event, args) {
    console.log('data', args.data);
    props.dispatch(actions.change('sites', args.data));
  }
}

如果您正在进行大量的 ipc 调用(接收和发送)，请查看 redux-electron-ipc ( link)。这从您的实际组件中删除了 ipc 调用的连接逻辑，并允许您直接使用 redux 状态。

注意:我是这个插件的作者。