Question

摘要

我希望有一个引用store的全局信使。我们称之为Messenger。我需要在不同的容器中使用它。它没有对应的React组件。

我现在拥有的

class Messenger {
  constructor(store, webview) {
    if (!chrome.runtime.id) {
      return false;
    }

    this.webview = webview;
    this.store = store;

    if (chrome.runtime.id) {
      chrome.runtime.onMessage.addListener(this.messageHandler);
      chrome.commands.onCommand.addListener(this.commandHandler);
    }
  }

  sendMessage(msg) {
    if (this.webview.contentWindow) {
      this.webview.contentWindow.postMessage(msg, "*");  
    }
  }
}

应使用store和webview对象初始化Messenger，如下所示：

$(function() {
  // exposing sandboxMessenger to a global namespace
  // so it can communicate with webview and sandbox
  window.app = {};
  app.sandboxMessenger = new SandboxMessenger(store, $('webview')[0]);

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('app')
  );
});

但是上面的设置要求我将webview对象完全置于React环境之外，如下所示：

<div id="app"></div> <!-- This part will be populated by React -->

<div id="webview-container">
  <!-- This part is isolated because I need to find it via $('#webview')[0];
  and pass it to Messenger -->
  <webview id="webview" src="sandbox/sandbox.html" partition="static"></webview>
</div>

对我来说似乎很理想

我希望将webview-container DOM包含到单独的Webview React组件中。安装后，我将初始化Messenger，因为我有一个webview对象。

问题

如果我试图遵循上述情况，我就没有store个对象。如果我明确地传递了store，那么我必须手动订阅以存储在我的所有子容器中。

问题

处理这种特定情况的最佳方法是什么，以及实现全局Redux容器的一般方法是什么？

全球共享的Redux容器

0 个答案: