last day (15 days later) » 

8:58 PM
0
A: Dealing with error when making fetch call in redux

JoshSGmanIn your fetch call use attach an error handler like so: return fetch(weatherUrl + location + '.json', init) .then(response => response.json()) .then(json => dispatch(receiveWeather(json))) .catch(err => handleError(err)) I don't know what implementation of fetch you're using but there's ...

 
Thanks for the reply JoshSGman. I don't see my implementation of fetch in my package.json file. However, I do see 'whatwg-fetch' in my node_modules folder. I'm using this react skeleton: github.com/joellongie/dustDevil. I can't seem to get to the handleError function after I add the '.catch(err...' line. I tried console.log('hello') before the return and I got nothing.
 
@Banner Try .error(err => dispatch(handleError(err)) instead of .catch
 
Getting this in the console: Uncaught TypeError: fetch(...).then(...).then(...).error is not a function
 
@Banner I looked into the whatwg-fetch module, looks like .catch is the way to go. Where are you putting your console.log?
 
.catch now returns the original error. The console.log is in the handleError function. I put it there to see if I can get there. Thanks for all your help so far!
importing fetch like this: import 'whatwg-fetch';
 
8:58 PM
@Banner, the original error being what? Uncaught TypeError: Cannot read property 'observation_location' of undefined ? It's possible that you're not getting an error back, but instead you're getting an empty json object. If that's the case, just put an if statement somewhere that just returns the current state if action.payload.current_observation == undefined
 
Object {response: Object}
response
:
Object
error
:
Object
features
:
Object
termsofService
:
"http://www.wunderground.com/weather/api/d/terms.html"
version
:
"0.1"
__proto__
:
Object
__proto__
:
Object
Yes Uncaught TypeError: Cannot read property 'observation_location' of undefined
So it doesn't look like I get an error back
but an object just like you said
 
In that case just add an
if statement
case RECEIVE_WEATHER:
if (!action.payload.current_observation) return state
...
 
Got it this is what I did:
case RECEIVE_WEATHER:
  if (action.payload.current_observation == undefined) {
    return Object.assign({}, state, {
      isFetching: false,
      city: undefined
    });
  } else {
    return Object.assign({}, state, {
      isFetching: false,
      city: (action.payload.current_observation.observation_location.full),
      country: (action.payload.current_observation.observation_location.country),
      weather_image: (action.payload.current_observation.icon_url),
      weather_description: (action.payload.current_observation.weather),
 
Sure that works
Are you using lodash?
 
Awesome, thank you so much for your help!
 
9:06 PM
Because a cleaner way to do this would be the following:
 
No, I am not. Heard of it but never used it.
 
      case RECEIVE_WEATHER:
        let currentObservation = action.payload.current_observation || {};
        let location = _.get(currentObservation.location, {});
        return Object.assign({}, state, {
          isFetching: false,
          city: location.full,
          country: location.country,
          weather_image: currentObservation.icon_url,
          weather_description: currentObservation.weather,
          weather_number: currentObservation.temp_c,
          wind_dir: currentObservation.wind_dir,
Or even without lodash, just so you don't need those annoying if statements
Anyways, if my answer helped you, make sure to mark it :)
 
Yeah that looks way cleaner than the if statement. I am going to look into lodash after i'm done with writing this app, almost there. I will mark it correct. Thank you so much for your help!
 
You don't need to use lodash
the only thing with lodash is the _.get
but instead
let currentObservation = action.payload.current_observation || {}
let location = currentObservation.location || {}
what you can do is
Cheers
 
Awesome that's working!!
Thanks again!
 

last day (15 days later) »