What's the best way to show a subset of data from redux?

user_13416874 0
Viewed 86

I'm working with openWeather API. It returns a response like this.

{
  "cod": "200",
  "message": 0,
  "cnt": 40,
  "list": [ ... ], // a list of size 40 which contains 3 hours forcast of 5 days

   "city": {
    "id": 2643743,
    "name": "London",
    "coord": {
      "lat": 51.5073,
      "lon": -0.1277
    },
    "country": "GB",
    "timezone": 0,
    "sunrise": 1578384285,
    "sunset": 1578413272
  }
}

Now in my UI i have a graph that shows temperature of the day an i want the user to be able to switch between days. Just like the google UI. London weather, google search

I also have search implemented so that when user searches for a city the response from the api gets appended to my redux state like this.

state: {
    data : [ ... ] // array of api responses 
}

In order to show data, there's two things needed 1) which city data to show (redux state has an array of data) 2) which day to show (api response has an array of forcast of five days). Initially i can show the first response and first day (current day). What happens when user wants to switch between days or the city. Should i have component state to handle that information? or should i keep this information in redux state (for which i'll need extra actions)?

openweathermap redux reactjs
1 Answers

You said it as it should be, firstly you show your first day and first city. And that information is stored in redux.

Now in redux you have array of five days forecast ([0: {} , 1: {}, 2: {}, 3: {}, 4: {}]. When user want to change day ex. from Monday to Wednesday, you take that information from redux and bind it to component.

When you want next day you agin ask redux for that day if you have it use it in component, if don't have do fetch and put it in redux.

If you need to manage that information to change it in some way ( I think you don't need it in this app) than you can put data in state otherwise you can use it as props in your component.

user_66721760
Related