javascript - 提取API并使其数据可跨组件访问

Question

我正在其中一个组件中获取API，并将其数据发送到dataAPI状态。它工作正常。

但是我想开始将我的应用程序分解为较小的组件。而且我希望能够从任何其他组件访问数据。而且我不想每次都进行不同的API调用。

这是我下面要提取数据的组件。从整个应用程序访问API数据的最佳方法是什么？

我目前还使用setInterval()每分钟刷新一次数据。

谢谢！

export default class Home extends Component {

  constructor(props) {
    super(props);

    this.state = {
      dataAPI: [],
      isLoading: true
    };

    // Refresh data every 60 seconds (60,000 ms)
    setInterval(() => {
      this.componentDidMount();
    }, 60000);

  }

  componentDidMount() {
    this.fetchData();
  }

  render() {
    var {isLoading} = this.state;
    if(isLoading)
      return this.renderLoadingMessage();
    else
      return this.renderResults();
  }

  fetchData() {
    var url = 'https://www.myapi.com';
    fetch(url)
      .then( response => response.json() )
      .then( jsonData => {
        var myData = [];
        console.log(jsonData);
        myData.push(jsonData);

        this.setState({
          isLoading: false,
          dataAPI: [].concat(myData)
        });
      })
    .catch( error => console.log('Fetch error ' + error) );
  }

  renderLoadingMessage() {
    return (
      <View>
        <ActivityIndicator animating={true} />
      </View>
    );
  }

  renderResults() {
    var {isLoading} = this.state;
    var d = this.state.dataAPI[0];

    if ( !isLoading ) {
      return (
        <View>
          <Text>
            {d.artist}
          </Text>
        </View>
      );
    }
  }

};


AppRegistry.registerComponent('Home', () => Home);

Answer 1

您可能要使用react redux。

设置起来有点困难，但是一旦设置完成，它易于管理，您可以在应用程序中的任何位置获取信息
请参考此链接：Getting started with Redux。

它涵盖了使用redux的不同方面。从一个简单的计数器示例开始。它还涉及如何管理api调用，在该调用中可以从应用程序的任何位置访问结果。

祝好运！