ilonacodes
Blog
YouTube
Contact
17
Mar
2018
#react
#redux
#fetch
#javascript
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

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

17 Mar, 2018

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!

Tags | #react #redux #fetch #javascript #frontend #learntocode #coding #letsgetcoding #womenwhocode
Next: Front-end Shorts: Setting up React-Router-Redux
Ilona who codes
Frontend Engineer in Berlin
M.Sc in Media CS

"I like to work hard for things that are worth it."
The latest articles:
Styling Form With Different States And Storybook
Harnessing the power of Bootstrap in React with Reactstrap
What are GraphQL and its schemas

Blog
YouTube
Contact
© 2019 ilonacodes
© 2019 ilonacodes
Blog
YouTube
Contact