React Native, Redux, and Fetch: “Possible Unhandled Promise Rejection (id: 0)”

1
votes

I am loading JSON data from a Webpage into my React Native app, and would like to store the data in Redux. I'm currently using Fetch like so:

fetch('https://foo.com/product-data/product1.json')
.then((response) => response.json())
.then((responseData) => this.state.productLoad(responseData));

where productLoad is the name of my action:

export const productLoad = (productData) => {
  return {
    type: 'product_load',
    payload: productData
  };
};

Unfortunately when I run the Fetch code I get this error:

Possible Unhandled Promise Rejection (id: 0)
TypeError: _this2.state.productLoad is not a function

I've been searching around the Web, and trying everything, but can't find a solution. I tend to think maybe it has to do with attempting to call the action before the data is loaded, and so I've tried using Redux Thunk, but with no luck (maybe I'm just not configuring Thunk correctly). Or maybe my productLoad function call is formatted incorrectly?

I'd appreciate any ideas and suggestions.

2
javascriptreact-nativeredux

2 Answers

1
votes

The error say us that this.state doesn't include productLoad function. You can use productLoad action by import it to fetching operation's file.

2
votes

Add a .catch to catch possible errors coming from the fetch req.

fetch(api)
.then()
.then()
.catch(err => {
  console.log('ERROR', err)
}