Question

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

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

getData.js

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

export default getData; // Returns a promise

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

app.js

import getData from 'getData.js';

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

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

将数据提供给我们所有应用的最佳方式是什么？这是我看到的两个选项：

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

还有其他方法吗？这是什么最好的做法？

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（）调用它。如果您没有数据，它将获取它，否则它会立即提供给您。

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

getData.js

app.js

2 个答案: