Okay, before we get our hands dirty with RTK Query Redux Toolkit query, let's have a quick discussion
about what this is and what benefits it gives us and why we should use it in our application.
This is actually quite a major update to this training course from the original version.
When I originally wrote the code for this course.
RTK query wasn't yet available with the Redux toolkit.
It was added either just about or just after I released the original version of this training course.
And it's worth the update because this is worth using, especially when using Redux, because it's all
integrated into our store.
So when we do go and fetch data with this tool, then it uses Redux as a kind of backing store for what
we get back from our API server.
So one of the things that we mentioned with Redux best practices is that reducers must not have side
effects.
So we can't inside a reducer when we want to.
Let's say we're updating a product.
We can't dispatch an action to update a product in our store, and then send off a request to our API
to update it.
On the API side, that's a no no because Redux is a synchronous store.
It's designed for synchronous code, not asynchronous code.
But surely a common use case would be to do something that I just described.
We've updated a product on our client, and we need to notify our API and effectively get our Redux
store in sync with what's going on on our API server.
And there was a tool that we could use to do this.
It was called a thunk, and a thunk was a function that is returned by another function and can be executed
later.
And this is how we would get around that.
So in Redux, a thunk would allow action creators to return a function instead of just a plain object,
and then that function can be executed to go and do something with our API.
And this is how I approached it in the previous version of the training course.
But the problem with this approach, as good as Redux toolkit, is at reducing boilerplate code.
As soon as we introduced this, we would start introducing boilerplate into our code.
So just as an example of how we did it previously, we'd create a thunk using the create async thunk,
which is still available in Redux Toolkit.
And then in our reducer we would specify extra reducers.
And this is only a small snapshot of the boilerplate for this kind of functionality, because I've only
included two cases the pending and the fulfilled state.
We would also need to handle the error state as well.
So for this single action, in this case fetching a user, we would need 4 or 5 lines of code for the
thunk.
And then we would need about another 8 or 910 lines of code for the extra reducer that we would need
to implement.
And just to give you a picture of how much boilerplate this would create, then this is an example of
how our catalog slice looked inside the original version of this course.
Many, many lines of code when using the Thunks with our Redux store.
So goodbye to that.
We're not touching that.
I'm not even going to demonstrate an example of that.
The code for the previous course is available if you want to take a look and see how to use that.
But I'm not going to cover that in this course because we have RTK query now.
And let's take a look at some of its benefits.
First things first, it reduces boilerplate.
We write a lot less code for the same functionality or more functionality, I should say, because some
of the other benefits it gives us, it gives us data fetching built in.
Again, in the previous version of this course, I used a data fetching library called Axios that really
is just a data fetching library, and it doesn't integrate with Redux.
So we end up using the Thunks and Axios and then updating our Redux store manually.
Based on what we get back from our API.
RTK query comes with data fetching built in.
It also comes with excellent TypeScript support.
Of course, we're writing our code in TypeScript, so we benefit from that.
And it also provides us with the ability to use optimistic updates.
So user does something in the user interface that requires us to update our API.
We can update the user interface immediately.
Then in the background do something with our API.
And if all goes swimmingly well, then great, nothing changes.
But if it all goes horribly wrong, then the update is rolled back and the browser user interface is
rolled back to what it was before the update was applied.
We also get automatic caching.
This is a huge benefit because writing the code to cache things that come back from our API on our client
side is quite burdensome for a developer.
This handles caching automatically, and caching is the number one, two and three way that we can improve
performance or perceived performance in our application.
So caching is definitely something we would want to add and it's server state focused.
So RTK query is focused on keeping our store in sync with server state.
And what we also get with RTK query is built in middleware, which provides a whole range of functionality
from the automatic cache management.
It also deals with request De-duplication.
So if multiple different components are triggering the same query with identical parameters, the middleware
ensures that only one network request is sent.
It also handles things like state management, so it listens for query and mutation actions, such as
when a fetch is started, when it's been fulfilled, when it's been rejected, so that we can use that
functionality to display a loading indicator.
And the middleware also handles error handling as well.
So a huge range of functionality and just a quick overview of how we use it before we use it.
We use the create API functionality from Redux Toolkit, and then we define endpoints and the queries
we wish to go.
What we also get with this is we get hooks automatically generated by RTK query as well, that we can
then simply use in our component.
And the hook that automatically gets generated for us contains the data that's coming back from the
API.
Any errors.
And also we can get the loading state from that as well.
So basically it's an incredibly powerful and useful tool that we're now going to implement in our application.