时间戳

首页 > 解决方案 > 使用带有 React Js 的“Unstated”从 API 端点获取数据

reactjs - 使用带有 React Js 的“Unstated”从 API 端点获取数据

问题描述

我已经开发了一个从 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 变量中，然后可以在需要时使用 .

标签： reactjsaxiosstatesetstateunstated

解决方案

我搬到 unstated-next 来做 react js。带有反应钩子和所有的同一个库。使用 useState 钩子可以轻松管理状态，并且也可以应用所有反应钩子。 链接到 unstated-next 的 github 存储库

由于它是 React 上下文 API 的包装器，因此该库是轻量级的，并且不需要像 redux 那样的太多配置。

推荐阅读