Javascript模块和应用程序范围的数据

在编写javascript模块时，我很困惑，在哪里以及如何存储可以在应用程序范围内使用的数据

假设我有一个模块从服务器获取一些急需的数据。假设它是配置数据

getData.js 该应用程序是一个react应用程序，需要呈现一些组件，但在未定义的点将使用我们的数据

app.js

从“getData.js”导入getData；
getData.then（（数据）=>{
render（，document.getElementById（'root'））；
});

在

层次结构中的某个点，将使用数据

在这里，获取所有应用程序可用数据的最佳方法是什么？ 以下是我看到的两个选项：

以某种方式通过层次结构中的每个组件传递数据（看起来很混乱）

将数据存储在全局对象中，然后渲染应用程序，但我听说要避免全局范围

---

还有别的办法吗？最佳做法是什么？

React不处理应用程序数据。对于这样的功能，一个广泛使用的库是Redux，它有一个姐妹库，名为

react Redux

，它使组件和应用程序级数据之间的交互非常容易

我建议从这里开始，因为尝试对此类数据使用内部状态可能会很麻烦；例如，您可以开始在不需要的组件上下传递数据。

我将回答您问题中的“任何其他方式”部分，因为我不确定这是否是最佳做法，尤其是在ReactJS环境中（我没有这方面的经验）

既然你不相信我的回答：

在AngularJS中，我将在这里使用一个服务，就数据而言，它本质上是一个单例。您可以在ES6中通过类上的静态函数来模拟这一点

例如：

export default class DataService {
  static getData() {
    if(this.data) {
      return Promise.resolve(this.data);//keeps function calls consistent
    }
    return new Promise(() => {
      fetch('http://data.com/my-data')
      .then(response => {
        response.json()
      })
      .then((data) => {
        this.data = data;
        resolve(data);
      })
    }
  }
}

---

然后将导入并使用DataService.getData（）调用它。如果您没有数据，它将获取数据，否则它将立即提供给您。

您的另一个选择是创建依赖意图系统我熟悉Angular中的服务。尽管仍然存在如何创建DataService对象并在应用程序中全局传递相同对象的问题，这是我最关心的问题。或者数据服务会因为是静态的而始终保持其状态吗？它应该保持其状态。尽管这可能取决于您使用的模块生成器。我使用Webpack和Babel测试了一个类似的服务，数据在访问它的类之间持久化。

import getData from 'getData.js';

getData.then((data) => {
    render( <TheBestApp />, document.getElementById(‘root') );
});

export default class DataService {
  static getData() {
    if(this.data) {
      return Promise.resolve(this.data);//keeps function calls consistent
    }
    return new Promise(() => {
      fetch('http://data.com/my-data')
      .then(response => {
        response.json()
      })
      .then((data) => {
        this.data = data;
        resolve(data);
      })
    }
  }
}