問(wèn)題描述

我有一個(gè)基于 electron-react-boilerplate 的電子應(yīng)用程序.

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

現(xiàn)在，我已經(jīng)按照我的意愿運(yùn)行了一個(gè)窗口，我開(kāi)始創(chuàng)建一個(gè)新窗口.

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

我目前有 2 個(gè) html 文件 - 每個(gè)窗口一個(gè) - 包含 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 應(yīng)用程序的響應(yīng)，如下所示:

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();

它的作用是檢查哪個(gè) div 根可用，并呈現(xiàn)適當(dāng)?shù)慕M件.

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

我的問(wèn)題

如何創(chuàng)建將在 BrowserWindow 實(shí)例之間共享的商店?我已經(jīng)研究了 2 個(gè) 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.

推薦答案

我嘗試使用這種非常簡(jiǎn)單的方法，它幾乎可以完美運(yùn)行，但有時(shí)它會(huì)凍結(jié)(我不確定到底是什么讓它凍結(jié)).也許這對(duì)任何人都有用，如果有人發(fā)現(xiàn)導(dǎo)致凍結(jié)問(wèn)題的原因，請(qǐng)告訴我們.

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 存儲(chǔ)代碼(所有窗口都使用相同的代碼):

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

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

Object.assign(window, { store });

然后我需要從主窗口的渲染器進(jìn)程中打開(kāi)新的電子窗口:

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

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

而且我們?cè)谥鬟M(jìn)程上也需要這段代碼:

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

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