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

Question

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

现在，我有一个窗口运行，我希望它运行，我开始创建一个新窗口。

我目前有两个html文件，每个包含窗口的div根都有一个：

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

我的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根是可用的，并呈现适当的组件。

我的问题

如何在BrowserWindow实例中创建一个共享的存储？我已经研究了两个npm包(electron-redux和redux-electron-store)，在这种情况下，它们似乎并不是解决方案。

Answer 1

我试着使用这个非常简单的方法，它的工作几乎完美，但有时它是冻结(我还不知道到底是什么使它冻结)。也许这对任何人都是有用的，如果有人发现了造成冻结的原因，请告诉我们。

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 */ });
});

Answer 2

不错的解决方案：

您可以使用redux-state-sync，这是一个redux中间件，用于同步redux存储和跨多个react选项卡的操作，这与电子很好地工作，因为这里的选项卡是不同的呈现程序过程。

唯一的障碍是在新创建的窗口中初始化存储，这可以通过从打开新窗口的主窗口发送带有ipc调用的存储状态来完成，后者会分派一个操作来更新状态。

这种初始化方法在react@17.0.0中工作得很好，但由于某些原因，它在reason react@18.0.0中不起作用