Okay.
In this part of the course, it's time to start thinking about getting our data back from the API.
And the question is how do we go and get it?
So far we've looked at using JavaScript fetch utility to go and get our data.
I've mentioned before, I do not like that approach to fetching data.
It's very low level, it feels, and we have to make two promise type Len statements to get actually
get the data.
And there's just so many better ways to go ahead and get data from our API.
And the approach we're going to take a look at for this training course is RTK query.
Now this is quite a significant update to the previous version of the course.
The code that I originally wrote, I wrote it literally just before RTK query became part of the Redux
toolkit, but it's been around for a couple of years now, and it's time to make the improvement to
this training course and incorporate it into our code, because it does give us huge benefits for data
fetching.
And I'm just going to briefly explain what it is, why we're going to use it, what it does give us.
And I also just want to show you briefly how we did it before.
RTK query with the original version of the Redux toolkit.
So I just want to point out a few highlights in this documentation.
And they say what is Redux?
The first thing to ask is what is Redux before using the Redux toolkit?
And sure, it's a single store containing global state.
For our application, we've taken a look at dispatching plain object actions to the store when something
happens in the app.
Clicking a button in our counter, for instance, that dispatches an action and we have pure reducer
functions looking at those actions and returning Immutably updated state.
That's what we've got.
And we've used the Redux toolkit, and we briefly mentioned things like action creators.
We didn't look at middleware.
We didn't look at thunk functions that contain sync or async logic with side effects.
And this is the approach that originally we would need to use with a Redux store to make asynchronous
requests to our API, which returns data that we effectively have to wait for coming back.
And I'll just move down because there's a few other things I want to mention inside here.
This is an example of kind of similar to what we've looked at, how we use old fashioned Redux with
lots of the boilerplate inside here.
And Redux toolkit, as I've mentioned, is designed to avoid that.
Now I'm just going to scroll a bit further down.
I do recommend reading this document.
It's quite a lot in here, but why?
They want us to use Redux Toolkit, the maintainers of Redux.
They really don't want us to use Redux as it was before, because they found that a lot of developers
ran into problems using Redux, and they would introduce bugs into their applications because of the
architecture and how it works.
And they created the Redux toolkit to avoid those common mistakes.
And it's really, really good.
But I'm going to keep coming down because there is a certain part where I do want to mention about because
they did include something called RTK query.
And when I mentioned about Thunks needing that, we would need to use to go out and make asynchronous
requests to go and get data from our API to then store it in our global state.
Then we would need to use these things called Thunks.
And the Redux toolkit came with something called a create async thunk that we would need to use to make
a asynchronous request, something where we need to wait for the data to come back.
And this RTK query eliminates the need to write any of these thunks reducers, action creators, or
effect hooks to manage fetching data and tracking loading states.
Now, certain things when it comes to requesting data from an API can traditionally be quite complex.
Things like caching things like managing the loading of what we're doing are all things that we would
previously need to manage ourselves.
But using a tool like Arctic Query eliminates this.
So when I say the previous version of this course, let me go to the equivalent point at the end of
this section that we would have got to if we were using Thunks instead of RTK query.
And I just want to show you the code that we would have to write.
And it's a bit boilerplate.
And this is an example of the fetch products async.
At this point in the course, we're not doing any sorting, filtering, pagination or anything like
that.
We would need this code to go out to our API and go and fetch the data.
Also with this code I used Axios as the data fetching tool.
So some of the code is hidden in this line as well.
There's actually more code that goes and handles getting the data here.
And to catch the errors.
It was also a bit awkward because we would be using the thunk API and we'd have to reject the value,
but not just lists as well, because this is the query that goes out and gets it.
But then in the slice, in the create slice, we would have these extra reducers where we would have
to add these cases for each different element.
So if we were going out to fetch the products, then we would have a pending state.
Whilst we're waiting for the data to come back, we would have a fulfilled state and we'd also have
a rejected state.
So for a single API request, we have all of this code here as well.
So what I'm trying to say is that I didn't love that approach, but it was the approach that was available
at the time.
I originally wrote the code for this course.
Now I'm going to show you a much better approach that gives us more functionality with a lot less code.
And because we installed the Redux toolkit, we already have this functionality.
And I'm just going to go back to the VS code and just clean things up.
And just to demonstrate briefly before we actually get into the thick of creating the code, I'm going
to use the catalog folder for this.
I'm just going to right click and say New File.
And I'm going to say catalog API dot t s.
And just a normal TypeScript file here.
We're not using react inside this file.
This is going to be just a normal TypeScript file.
And Redux and RTK query, they're able to be used with any type of UI framework is not just react that
uses this.
So we can use catalog API TS here.
It's not strictly react related.
What we're doing here and inside here I could say for example, I could say export const and say catalog
API equals.
And then we use the create API function from Redux toolkit query.
And I did say it wasn't specific for react, but there's two versions of the create API, and the one
that we want for a very specific reason that I will explain shortly.
We need to use this one Redux toolkit query react.
So press return and make sure you've got this import inside here that includes react at the end.
Very important.
I lost about half an hour of my time once when I didn't pay attention to what I was importing, and
the thing that I was looking for to work didn't work.
So please do make sure you have it the same as me there.
And then inside here we can start creating our API functionality.
Now, I've been talking for a little while, explaining the whys of what we're doing and why we're going
to do it.
So I'm going to actually start writing the code in the next lesson.
And next we're going to take a look at how we can use this to fetch the data from our API, and use
it to store the data effectively in our store and use it in our react components.
And that's coming up next.