React Hooks tutorials for beginners-9

Hooks

Welcome to part-9 of the series. You can find part-8 here. We will learn to fetch data with useReducer hook in this part.

Fetch data with useReducer

For fetching data with useReducer, we will first install axios with below command in the terminal.

npm install --save axios
axios

We will first look into the example of fetching data, with useState and then the same example with useReducer.

Create a new file DataFetching1.js inside the components folder. Here, we have done the necessary imports and after that we have three state variables, using useState.

Now, in the useEffect we are calling the API endpoint to return a single post. On success in the then block, we are setting the loading to false, post to response.data which is an object and error to an empty string.

Similarly, in the case of error in the catch block, we are setting the loading to false, post to empty object and error to an string.

Now, in the return statement, we are displaying the text Loading if loading is true or else the post.title. Also, if we get error we are displaying itr or elase null.

DataFetching1.js

Now, include DataFetching1 in the App.js file.

App.js

Now, if we go to localhost we can see the post title. If we refresh and see closely, we can see the Loading text also.

post title

To see the error code been executed, we need to misspelled in the url.

Misspelled

Now, back to localhost we can see the error.

The error

Next, we will see how to do the same with useReducer and useEffect. Create a new file DataFetching2.js inside the components folder. Here, we have done the necessary imports and after that in initialState we are having the three states for loading, error and post.

Inside the reducer we have two cases, one for FETCH_SUCCESS and other for FETCH_FAILURE and both of them are changing the three states.

DataFetching2.js

Now inside the DataFetching2 function, we are using the useReducer function which takes the reducer and initialState and get’s the state and dispatch. After that the useEffect is doing the API call and when it successfully receives the response, it dispatches the FETCH_SUCCESS and the payload top the reducer.

In the case of error, the FETCH_ERROR is dispatched to the reducer. Next, inside the return statement we are showing title or error depending on the state.

DataFetching2.js

We have included DataFetching2 in the App.js file.

App.js

Now, on moving to localhost we can see the logic working as earlier.

Working

This completes part-9 of the series. You can find part-10 here.

You can find the code for the same in this github repo.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Shaping Data with JavaScript: Part 3 of the Code Fellows “Mastering Arrays” series

Creating Blog site using Stackbit, GatsbyJS and DEV -4

Personal Development Days November 2017

React app with Koa JS

Time is an illusion

Create a Password Generator in JavaScript

Five Code Smells To Avoid

Deploy an Angular app with nginx

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Simple react app with bootstrap.js

Create a React App from scratch using Webpack and Babel

React app with Koa JS