React / Redux：从浏览器获取数据后如何调用API？

Question

我的React应用程序应根据其位置向每个用户显示附近的商店。

我想要做的是在window.geolocation中获取componentDidMount()的纬度/经度，我将其称为REST API，其纬度/经度为params以检索附近的商店。

我只想弄清楚如何组织以及在哪里放置逻辑。

Answer 1

这个想法是你应该在达到redux之前尝试使用React的状态。它既简单又保持尽可能多的本地状态。

React状态存储API调用的状态（尚未成功，成功或失败）以及有关成功（results）或失败（errorMessage）的相应信息。重要的一点是你的render函数必须明确处理所有3个案例。

class NearbyShops extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryStatus: 'initial',
      results: [],
      errorMessage: '',
    }
  }

  async componentDidMount() {
    try {
      const results = await fetch('you.api.url/here');
      this.setState(prevState => ({...prevState, results, queryStatus: 'success'}))
    } catch (e) {
      this.setState(prevState => ({...prevState, queryStatus: 'failure', errorMessage: e}))
    }
  }

  render() {
    const {results, queryStatus, errorMessage} = this.state;

    if (queryStatus === 'success') {
      return (
        <div>{/* render results here */}</div>
      )
    } else if (queryStatus === 'failure') {
      return (
        <div>{errorMessage}</div>
      )
    } else {
      return (
        <div>Loading nearby shops...</div>
      )
    }
  }
}