Simple React JS with Auth0|Redux|MUI and Consume Web API — Part Three
Let’s keep this party rolling then.
Alright, it’s not really a party.
Let’s keep this tedious, mind numbing but extremely useful for earning livelihood thing going then.
In the previous part, I spoke about setting up all the many, many…many, components of React JS up and running. Yes, it is tedious. Just like this blog post.
Note : This is a sequel to my previous post.
As always, the final app and the code is available here.
The ‘Item’ Thingy
Here, we will look at the five key things that make up a single ‘item’. When I say, item, I am talking about, a single thing that you are working. For instance, in this post, I will start by looking at the following ‘item’ thing.
I have an endpoint, from one of my own api servers.
https://randomstuffapizeropoint4.azurewebsites.net/api/UserNotLoggedIn/GetHoldOfthemWhen I hit this endpoint, I get something like this.
The Item or React Component that I want to build should do the following.
- Contact the above API server.
- Collect the JSON response
- Show a simple loading animation or text while the communication between app and api takes place.
- Display it on the screen.
- Lastly, have a simple button. On pressing the button, call the api again, and get a brand new response.
It would look something like this.
In order to make this happen, we will be looking at so many files. So. Many. Files.
In fact, I wrote a document on the code repository, which you can find here. Let’s elaborate on the steps right here.
The code snippets are coming from this specific folder, called, randomstuffgenerator.
Note : I keep using the word ‘todos’, when in fact, I am loading quotes from the API server. Sorry about that.
First, you are going to update your actions.js.
As the name implies, these are actions that you will use in conjunction with your redux store. Ultimately, the goal is connect everything to your global redux store you can do some cool state management anywhere in the project, in any component or React View.
Now, move on to the reducers.js. I am still new to React and Redux, but I believe this is where the redux gets updated with values related to loading, actual response from API and so on and so forth.
Now, move on to your thunks.js.
This is where you do your actual talking to the API. In other words, you will find your fetch call here.
There is a file called selectors.js. This is used for filtering, sorting and other such things. Unfortunately, in my demo app, as of the time of writing this blog post, I am not using any filtering.
So, the file is a placeholder.
However, I implore you to look into this, if you are dealing with a collection of data, and want to do some filtering.
Okay.
Next, let’s look at the final item, which is the react component that puts all this together.
Let’s look at some key things.
function changeRandomText(e) {So, this is the function that helps the button work, which can be clicked repeatedly to call the same API again and again.
return isLoading ? loadingMessage2 : content;the property, ‘isLoading’, keeps changing as per redux, which changes as per the work done by the thunks. When the API is being contacted, the state changes to loading. When the response finally arrives, whenever it does, the state changes to the actual JSON.
So, depending on the state, we return the ‘loading’ component or the ‘json data’ component.
Final Note
To me, personally, as a guy who is learning React JS as he is teaching it to others, the whole process is confusing as hell. I remember being able to do this, far more easily in vanilla JavaScript.
Just put a simple fetch call, and update the DOM. Problem solved, when using vanilla JS.
However, the reason we use React JS (or any framework for that matter) is because, you want things to remain manageable as the scale of your project explodes and gets bigger and bigger.
So, for a single and simple API GET endpoint, this might look like a lot of effort. However, as we will see in future parts, this actually seems like less effort.
Until next time.
I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash. Also, I have a Podcast about everyday life. And, a 2nd Podcast, where I talk about freelancing.
