全局 window 通量模式中的操作

Question

背景

我希望实现一个通量存储来管理异步第 3 方脚本（当前用例是 google 映射 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)

问题

google 地图脚本接受回调运行一旦脚本初始化，这是我想更新我的商店的地方。

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

问题

是否有任何推荐的模式来公开 google 映射的全局回调以命中 init，然后它可以更新我的 Stores 状态，同时仍在经历我的 AppDispatcher？

Answer 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 () {

    }
  };
}

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

全局 window 通量模式中的操作

Global window Actions in Flux pattern

google-maps

flux

reactjs

reactjs-flux