Search code examples
reactjsaxiosstatesetstateunstated

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

I have already developed an app to fetch weather data from openweathermap.org. The app is built using redux and redux-saga. Now I have to redo it using "Unstated" instead of Redux for the state management.

The WeatherContainer.js class handles the state:

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

The axios request which gets the data from the API endpoing.

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

I want to store the data received from axios inside the state.weather variable in WeatherContainer, which then can be used when I needed with .

Solution

  • I moved to unstated-next for react js. the same library with react hooks and all. It makes easy to manage state with useState hooks and all the react hooks can be applied as well. Link to github repo of unstated-next

    Since it is a wrapper around the React's context API, the library is light weight and does not need much configurations like redux.