在React Js中使用“Unstated”从API终结点获取数据

Question

我已经开发了一个从openweathermap.org获取天气数据的应用程序。该应用程序是使用redux和redux-saga构建的。现在我必须使用"Unstated“而不是Redux来重做状态管理。

WeatherContainer.js类处理状态：

class WeatherContainer extends Container {
  state = { weather: [] };
  setWeatherData = (weather) => {
    this.setState({ ...this.state, weather });
  };
}

从API端点获取数据的axios请求。

axios.get(process.env.REACT_APP_BASE_URL, {
    params: {
      id: cityIds,
      units: "metric",
      appid: process.env.REACT_APP_API_KEY,
    },
  });

我希望将从axios接收的数据存储在WeatherContainer中的state.weather变量中，然后可以在需要时使用它。

Answer 1

我转到了react js的unstated-next。带有react钩子的相同的库。它使得使用useState钩子管理状态变得很容易，并且所有的react钩子都可以应用。Link to github repo of unstated-next

因为它是React上下文API的包装器，所以这个库很轻量级，不需要像redux这样的很多配置。