問題描述

我有一個基于 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 */ });
});

這篇關于ElectronJS - 在 Windows 之間共享 redux 存儲?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！