Front-end Shorts: Fetch List of Resources From REST-API

Today I am going to tell you how to get JSON data from the Rest-API to UI using React+Redux frameworks.

In my case, the task looks like:

I have a URL, for example: https://api.com/v1/expenses/ which will give the following JSON data, and I want to get this data in my UI.

To solve this task, I decided to use JavaScript’s fetch method. So in this way, I shouldn’t rely on any external libraries (given my target browsers are remotely up-to-date).

What is nice, that by default the fetch method uses GET and I don’t have to specify any options, however, you can do all that if you want. For further reference: Fetch API reference.

Let’s look at the following code snippet of my implementation:

const loadExpenses = () => {
       fetch('https://api.com/v1/expenses/')
            .then(response => response.json())
            .then(expenses => loadedExpenses(expenses))
};

*loadedExpenses is a function that dispatches action to Redux and then reducer stores the data in the store.

Thank you for reading and have a lovely weekend!