Access to api data working fine in react but not react/redux, what am i doing wrong?

I’m new to react and practicing using it with api data. I have a version of a simple app i’m making that pulls data from an exchange rates api (https://api.exchangeratesapi.io/latest?base=GBP) and displays the data on the screen (as a first step) - github link here: (https://github.com/char502/Exchange_App_NoRedux). I am able to access the relevant part of the returned object by using the following code (lines 82 to 85 on the ‘components/RequestExchange.js’ page):

{Object.keys(items.rates).map((key, index) => (
              <li key={index}>
                {key}: {items.rates[key]}
              </li>

I am also building the same project with redux to help my currently weak redux skills:
(https://github.com/char502/exchange_rate_app_react) however, when i try to access the same part of the api as the above example (without redux), i cannot get the data to output to console or render to screen. I just keep getting the error ‘TypeError: Cannot convert undefined or null to object’. I can get the first level of data to the screen (i.e. base rate, line 79 in the redux version of the app) so i know the data is coming through, i just don’t understand why i can’t access the data a layer below (a nested object of key/value pairs showing country code and the rates themselves) when i believe i’m applying the right way to access it (as the code above works in the non-redux version). I would be grateful if someone could check my code and see what is going on, is it some asynchronous thing i’m missing or is the data not flowing through redux correctly, i just can’t tell and I’ve been struggling with this for days.

Apologies for long post i’m just trying to provide all context in the hope that the problem is easy to spot by someone who knows what they’re doing?

Can you console.log items.rates?

Also, I’ve cloned your repo but there’s no error, can you update it?

Hi, thanks for taking a look.
The non redux version works but the redux version (as per this link): (https://github.com/char502/exchange_rate_app_react) doesn’t.

I have console.logged items.rates (on line 76 in the file: ‘ExchangeRateList.js’)and i get this:

image

but when i uncomment lines 83 to 89 in the file ‘ExchangeRateList.js’ (i.e the exact same thing i have in the non-redux version which works) i get the error ‘TypeError: Cannot convert undefined or null to object’ and i don’t understand why?

What’s happening is that loading is set to false at the beginning and error to null. Both which are probably fine. But, you have to keep in mind that react can’t wait you to get your data or even to dispatch your first action. You probably thought you’d set loading to true before the first render run, but you can’t do that. You must make sure your render function can always render something.

I set to log what props we are receiving and what is our item.rates.
Capture

As you can see our props loading is false and error is null. Our item_rates them was not fetched yet, which means we’re calling Object.keys on undefined.
Capture2

So, how to fix? We can set loading initial state to true since we know the first thing we’ll be doing is fetching the server anyway.

in ratesReducer.js

const initialState = {
  items: [],
  loading: true,
  error: null
};

But even better would be to protect our render function in case our items is not fetched yet by checking if our items.rates is not undefined.

Capture3

1 Like

SOLVED - OMG it’s working!! I thought it might be something asynchronous related but thought i had set up the logic properly! Thank-you so much for taking the time to help and to clearly explain the problem, i really appreciate it :smiley: