使用 'Unstated' 和 React Js 从 API 端点获取数据

Question

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

WeatherContainer.jsclass处理状态：

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

我移动到 unstated-next 来响应 js。带有反应钩子和所有东西的同一个库。使用 useState 挂钩可以轻松管理状态，并且也可以应用所有反应挂钩。 Link to github repo of unstated-next

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

使用 'Unstated' 和 React Js 从 API 端点获取数据

using 'Unstated' with React Js for fetching data from API endpoint

reactjs

axios

state

setstate

unstated