ElectronJS - 在 Windows 之间共享 redux 存储?

2022-01-10 00:00:00 reactjs electron javascript

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

I have an electron app based on electron-react-boilerplate.

现在，我已经按照我的意愿运行了一个窗口，我开始创建一个新窗口.

Now, that I have one window running as I wanted it to run, I started to create a new window.

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

I currently have 2 html files - one for each window - containing div roots:

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

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

My index.js file that is response for rendering the react app looks like this:

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

What it does, it checks which div root is available, and renders proper components.

我的问题

如何创建将在 BrowserWindow 实例之间共享的商店?我已经研究了 2 个 npm 包(electron-redux 和 redux-electron-store)，在这种情况下，它们似乎不是我的解决方案.

How can I make a store that will be shared accross the BrowserWindow instances? I already looked into 2 npm packages (electron-redux and redux-electron-store) and they do not seem as a solution for me in this case.

推荐答案

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

I tried using this very simple approach, it works almost perfectly, but sometimes it's freezing (I'm not sure yet what exactly is making it to freeze). Maybe this could be useful to anyone, and if someone finds out what is causing the freezing issue, please let us know.

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

Redux store code (this same code is used by all windows):

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

Object.assign(window, { store });

然后我需要从主窗口的渲染器进程中打开新的电子窗口:

Then I need to open new electron window from a renderer process of the main window using:

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

而且我们在主进程上也需要这段代码:

And we also need this code on the main process:

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

相关文章