即使在跨多个组件路由之后，如何在 Electron 驱动的 React 应用程序中处理持久数据、函数和任务？

Posted 2023-03-22

【中文标题】即使在跨多个组件路由之后，如何在 Electron 驱动的 React 应用程序中处理持久数据、函数和任务？

【英文标题】：How to handle persistent data, functions and tasks in a Electron-powered React application even after routing across multiple components?

【发布时间】：2018-12-21 02:24:31

【问题描述】：

我对 React 比较陌生，因此在尝试弄清楚如何在 React 中实现某些东西时遇到了几个障碍。最近我正在编写一个仅包含网格视图和详细信息视图的应用程序，为了导航，我一直在使用道具和函数来操作子组件中根组件的状态，但是一旦我重组了我的代码和层次结构比一层更深。幸运的是，我能够从 react-router-dom 实现 MemoryRouter 并且它按预期工作。不幸的是，我现在遇到了一个问题，我不知道如何正确地使用 React 进行设计。

假设我在/ 下可访问的应用程序的登录页面具有上述包含各种元素的网格。单击某个项目后，您将成功重定向到/details/:id。我能够在我的DetailsPage 组件中解析通过withRouter 可用的id 参数。假设用户能够通过按下特定详细信息页面上的按钮来启动较长的后台进程（实际上是下载）。很可能不会有任何问题以异步方式运行，并让下载过程偶尔报告进度以更新当前页面上的进度指示器。

如果用户返回登录页面，打开另一个项目的详细信息页面，在那里进行下载并返回到第一个详细信息页面怎么办？基本上我想知道的是我如何编写我的代码，以便这些下载在后台运行，同时即使在导航之后也可以访问数据。特别是在返回第一次下载时，我希望进度指示器自动更新为后台可用的状态/数据。

【参考方案1】：

我通过创建第二个BrowserWindow 解决了这个问题，但让它不可见，让它作为任务和下载的后台工作人员/代理运行。为了避免编写自定义 IPC 来获取状态，我集成了 Redux。结合electron-redux，我能够在主进程中创建一个商店，并在每个渲染器进程中拥有一个商店，与其他进程同步。这使我可以在后台工作人员中发出操作，而无需将其 IPC 到主窗口。