通量模式中的全局窗口操作答案

【问题标题】：Global window Actions in Flux pattern通量模式中的全局窗口操作
【发布时间】：2015-06-27 09:17:45
【问题描述】：

背景

我希望实现一个通量存储来管理异步 3rd 方脚本（当前用例是谷歌地图 API）

我希望能够让我的地图组件与商店一起检查 api 状态并以这种方式管理外部脚本，而不是将它们内联以始终加载，仅在第一个组件需要时加载脚本

它只会做类似的事情：

script         = document.createElement('script')
script.async   = 'async'
script.src     = src
script.onload  = () =>
  // update state and emmit change event

document.getElementsByTagName('head')[0].appendChild(@script)

问题

谷歌地图脚本接受一个回调，该回调将在脚本初始化后运行，这是我要更新我的商店的地方。

此回调需要全局存在于窗口中，但是，我真的不想将任何Actions 直接暴露给窗口。

问题

是否有任何推荐的模式来公开谷歌地图的全局回调以点击 init，然后可以更新我的 Stores 状态，同时仍然通过我的 AppDispatcher？

【问题讨论】：

标签： google-maps reactjs reactjs-flux flux

【解决方案1】：

您始终可以在商店创建时为其分配全局变量。

类似：

function createStore() {
  window.initializeGoogleMaps = function () {
    window.initializeGoogleMaps = null;

    // Tell the world that Google Maps loaded
  };

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
               '&signed_in=true&callback=initializeGoogleMaps';
  document.body.appendChild(script);

  return {
    doStuff: function () {

    }
  };
}

这样，全局包含在该函数中，并在调用回调时将其删除。您的应用程序的其余部分将看不到它，您无需触摸任何其他文件即可更改它。

【讨论】：