一个关于 Electron + React 的 Nodejs 问题咨询

发布于 1周前 作者 ionicwang 来自 nodejs/Nestjs

Electron + React 渲染进程和主进程如何使用 redux 共享状态? 有没有啥方案或者包推荐的?
一个关于 Electron + React 的 Nodejs 问题咨询

Harmonyos Next教程
14 回复

后端小白问下：

react 都有 hooks 了还需要用 redux 做什么用？

因为有一次我问我的前端同学用什么做状态管理，他说用 react hooks 就够了。。。。


很短暂的用过一段时间，考虑一下状态放主进程，然后自己封装一下和主进程通讯的方法用？

没有什么用，现在用 redux 主要还是历史遗留问题，除非你的状态过于复杂或者需要回放等功能，其他情况下根本不需要 redux

监听主进程的里面的状态对象，感觉是可行的

把渲染进程同步主进程状态的行为理解成跟 web 开发中的异步后端调用就好了

印象中，这两个线程是独立的。不能直接共享数据。
但是 electron 提供了通信方式。你看看这个
进程间通信 https://www.electronjs.org/zh/docs/latest/tutorial/ipc

主进程和渲染进程是隔离的，主进程是 node 环境，渲染进程是 web ，共享状态还是要靠进程间通讯来实现

通过 IPC 去交互: https://www.electronjs.org/docs/latest/tutorial/ipc

你把主进程理解成后端，Electron 内部还是个前后端分离的系统，自然没有共享状态这事了，只是通信相比 HTTP 快很多

你就当做普通 web 开发，前后端分离，ipc 通讯就是调 api 。不要想着在一端就能搞定所有的。

我们之前的项目，直接搞了个 middleware ，每次 action 把 redux 状态通过 IPC 传到主进程里
这么干其实没必要，浪费资源
实际上只需要把需要用到的数据传到主进程就可以了

复杂状态管理个人认为还是 redux 更方便，尤其是一些基于 redux 封装的包。（可能也是遗留的使用习惯问题）。但是确实 context 和 reducer 可以解决大部分状态管理的问题

eletronAPI

你好！很高兴回答你关于 Electron + React + Node.js 的问题。这是一个非常流行的技术栈，用于构建跨平台的桌面应用程序。以下是一些常见的问题及其解决方案，希望对你有所帮助。

问题1：如何集成 React 到 Electron 应用中？

你可以使用 create-electron-app 或 electron-forge 这类脚手架工具来快速初始化一个包含 React 的 Electron 项目。以下是一个简单的 electron-forge 示例：

npx create-electron-app my-app --template=webpack-react
cd my-app
npm start

问题2：如何在 Electron 中使用 Node.js 模块？

在 Electron 中，你可以在 preload 脚本或渲染进程中直接使用 Node.js 模块。以下是一个简单的示例，展示如何在 preload 脚本中使用 fs 模块：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
const fs = require('fs');

contextBridge.exposeInMainWorld('electronAPI', {
    readFile: (filePath) => fs.readFileSync(filePath, 'utf8')
});

在渲染进程中，你可以通过 window.electronAPI.readFile 来调用这个 API。

问题3：如何打包 Electron 应用？

你可以使用 electron-builder 或 electron-packager 来打包你的 Electron 应用。以下是一个使用 electron-builder 的示例：

npm install electron-builder --save-dev
# 在 package.json 中配置 build 脚本
npm run build

希望这些信息对你有所帮助！如果你有更具体的问题，请随时告诉我。

回到顶部