ElectronJS - 在窗口之间共享 redux 存储?

2024-04-14

我有一个基于的电子应用程序electron-react-boilerplate.

现在,我有一个窗口按照我希望的方式运行,我开始创建一个新窗口。

我目前有 2 个 html 文件 - 每个窗口一个 - 包含 div 根:

  1. <div data-root id="main_root"></div>
  2. <div data-root id="second_root"></div>

My index.js用于渲染 React 应用程序的响应文件如下所示:

import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import HomeRoot from './roots/HomeRoot';
import HoverRoot from './roots/HoverRoot';
import { configureStore, history } from './store/configureStore';

const store = configureStore();

const rootMapping = {
  main_root: {
    name: 'HomeRoot',
    Component: HomeRoot,
    getNextRoot: () => require('./roots/HomeRoot'),
  },
  second_root: {
    name: 'SecondRoot',
    Component: SecondRoot,
    getNextRoot: () => require('./roots/SecondRoot'),
  },
};

const renderDesiredRoot = () => {
  const rootElementID = document.querySelector('[data-root]').id;
  const root = rootMapping[rootElementID];
  if (!root) throw Error('There is no such Root component!');
  const { Component, getNextRoot, name } = root;
  render(
    <AppContainer>
      <Component store={store} history={history} />
    </AppContainer>,
    document.getElementById(rootElementID),
  );
  if (module.hot) {
    module.hot.accept(`./roots/${name}`, () => {
      const NextRoot = getNextRoot();
      render(
        <AppContainer>
          <NextRoot store={store} history={history} />
        </AppContainer>,
        document.getElementById(rootElementID),
      );
    });
  }
};

renderDesiredRoot();

它的作用是检查哪个 div 根可用,并呈现正确的组件。

我的问题

如何创建一个在浏览器窗口实例之间共享的商店?我已经研究了 2 个 npm 包(electron-redux and redux-electron-store)在这种情况下,它们似乎不是我的解决方案。


我尝试使用这种非常简单的方法,它几乎完美地工作,但有时它会冻结(我还不确定到底是什么使它冻结)。也许这对任何人都有用,如果有人发现导致冻结问题的原因,请告诉我们。

Redux 存储代码(所有窗口都使用相同的代码):

export const store = window.opener?.store || createStore(...);

Object.assign(window, { store });

然后我需要使用以下命令从主窗口的渲染器进程打开新的电子窗口:

const newWindow = window.open("/path", "someName");

我们在主进程上还需要这段代码:

win.webContents.on("new-window", function (e, url, frameName, _, options) {
  e.preventDefault();

  if (frameName === "someName")
    e.newGuest = new BrowserWindow({ ...options, width: 300, height: 200, /* anything else you wanna add */ });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ElectronJS - 在窗口之间共享 redux 存储? 的相关文章

随机推荐