Okay.
So as mentioned we're going to take a look at Redux DevTools.
And that's one of the things that we can use when we're using Redux in our application.
And this is one of the greatest DevTools I think I've ever seen.
It's very useful for helping us troubleshoot anything Redux related, anything that's problematic in
our states where we can go and get information.
So let's search for Redux DevTools in Google.
This is another Chrome extension that we're going to need to add to our browser.
And I mentioned it before, but I would really highly recommend that you just keep a browser like Chrome
specifically for development that contains your development extensions like this.
And then for all other browsing, use brave or something else and then just keep this one for development.
So great, now I've got this installed.
What does this give us?
Well, if we go to right click and inspect then let's take a look at what we now have inside here.
And annoyingly I don't see it on this list and I've got to go and click it from this side.
So this is Redux DevTools in the tab down here you may see a button if you've got the screen resolution.
My extensions are not showing up.
Or maybe I need to enable the extension there.
And it's telling me that there's no store found.
Mm.
Well that's disappointing.
Let me refresh the page because I'm pretty sure we will get a store.
And sure enough, now we do.
Now, there's not a huge amount going on at the moment because we don't have much data.
We've got a simple counter, but this will give us an adequate demonstration of these tools and how
useful they can be.
So first of all, if we click on this we're going to see the initial state of our store.
So please make sure you've clicked on the Redux tab.
And then click on init.
And over on the right hand side we can see the difference between what the state was before and what
the state is now.
We don't see anything there because we're just on the init.
But if we do take a look at the states, then we can see our states, our counter slice and again limited
amounts going on here.
Because all it's going to tell us is the data is 42.
But let's start clicking things.
And if I increment then we can see the action that's been sent or dispatched to our store.
And we can see the data has gone up.
So I'll increment again.
And then I'll increment by five and then I'll decrement and then I'll increment, for example.
And if we go down to the bottom one then we can see that the data is on 49 which matches what's going
on in our browser.
So when a state change happens in our store, if we take a look at the action tab, we can see what
type of action was responsible.
And we can also see the payload.
So one of these increments was a payload of five.
And if I click on this one then we can see that payload is five.
If we take a look at the state at this time then we can see that the counter at that point was 49.
And we can also see the difference between what it was and what it is now.
So previously it was 44, but after that action then this state is 49.
Obviously in such a simple example like this, we're not going to see a huge benefit of this.
But what we also get here is effectively what they refer to as time travel debugging.
We can go and jump to a specific state change.
And if I jump notice that the browser changes as well.
So we can see the live updates in our browser based on what state was taken or what action was affecting
our state at the time it happened.
So we can hit the play button and then it's going to play through the different state options.
And we can see that going on in the browser as well as it happens.
And it's a really cool tool.
And anything that we do that affects our store, we'll be able to get information from this inside here.
Not particularly useful at the moment, I agree because of the limited amount of code we've got to work
with just now.
But as we implement the functionality that we're going to use with our Redux store, we're soon going
to be looking at async functionality so that we can go and get our products from the store and then
effectively store them in our store, and then we'll be able to see what's going on using these tools
as well.
So highly recommended that you add these to your browser.
I believe there's a version available for Edge and Firefox as well, although to be honest, I only
ever use Chrome for development, so I've never even looked and tested them on other browsers, but
I'm sure there are versions of this available for that.
So just another good tool in the toolbox.
If we run into problems, then we've got somewhere else to look.
So we've got our console to see any console output that we either manually implement and add ourselves.
We've got our network tab to see what's going on with our API request to our server.
We've got our react tools that will give us information about our components.
And now we've got a Redux tool that's going to tell us about our global state in our application.
So tools in our toolbox.
And we never want to be troubleshooting in a position like this where something isn't working as we'd
expect it to.
And this is what we're looking at for information.
So please do take advantage of the excellent developer tools at our disposal.
So great.
Now we've got that in place.
What we're going to take a look at next is how we're going to make asynchronous requests to our API
or HTTP request to our API.
And it's something else that comes with Redux Toolkit called Redux Toolkit Query or RTK query.
That's what we're going to be using to make asynchronous requests.
And we'll take a look at that next.