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

Question

在编写javascript模块，在何处以及如何存储可在整个应用范围内使用的数据时，我感到困惑。

说我有一个模块，可以从服务器获取一些非常需要的数据。 可以说它是配置数据。

getData.js

function getData() {
    return fetch('http://data.com/my-data')
    .then(response => response.json())
}

export default getData; // Returns a promise

该应用程序是一个React应用程序，需要呈现一些组件，但是在不确定的时候会使用我们的数据。

app.js

import getData from 'getData.js';

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

在<TheBestApp />层次结构中的某个时候，将使用数据。

获取数据以供我们所有应用程序使用的最佳方法是什么？ 这些是我看到的2个选项：

1. 以某种方式将数据传递到层次结构中的每个组件（似乎很杂乱）
2. 将数据存储在全局对象中，然后呈现应用程序，但我听说避免全局范围

还有其他方法吗？ 最佳做法是什么？

Answer 1

React不处理应用程序数据。 对于此类功能，Redux是一个广泛使用的库，它具有一个名为react-redux的姊妹库，该库使组件与应用程序级别数据之间的交互非常容易。

我建议从此处开始，因为尝试将内部状态用于此类数据可能会很麻烦； 即。 您可能会开始在不需要数据的组件上下传递数据。

Answer 2

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

现在，您已经不相信我的回答：

在AngularJS中，这是我要使用Service的地方，就数据而言，它本质上是单例。 您可以在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（）进行调用。 如果您没有数据，它将获取它，否则它将立即将其提供给您。