Original subtitles

So, now our cart is working correctly

and we learned a lot about where to put code

how to run async code with Redux

and how to handle side effects.

And we spent a lot of time on that

because it is an important topic

and knowing your options there is extremely important.

I can't emphasize this enough.

It's important to understand how that works.

But besides handling async tasks and side effects with Redux

and understanding where to put our code

there was another important topic

I wanted to have a look at in this module.

And that would be the Redux Devtools.

These are extra tools which we can use

which make debugging Redux and our Redux state a bit easier.

Because in more complex applications

with a lot of Redux state handled

by a lot of different slices

and a lot of different actions going on

it can be difficult to find errors in your debug state

in the order of your actions and so on.

And sometimes it might be interesting to look

into the current state of your overall Redux store

without having to dive into different parts

of the UI to verify that everything works correctly.

And that is what we can use the Redux Devtools for.

You can simply search for Redux Devtools

and you'll find a GitHub repository

about the Redux Devtools

and the Redux Devtools can be used

and installed as a browser extension.

You can always install them as a stand alone app

but I personally find the browser extension easiest to use.

So, here I'm on Chrome

so I'll pick that Chrome browser extension

and here you can install this Chrome extension.

Now, I already do have it installed.

You can install it with a click of a button

and once you did so, you will be able to use it right away.

When using Redux without Redux toolkit

you had to set up some extra code

to make Redux Devtools work.

With Redux tool kit it will conveniently work out of the box

and you should then have access to that extension.

Now, here I have an in cognitive tab open

and there I don't have access to my extensions

so, I'll quickly run the application

in a standard Chrome tab again

and when I do so I have this Redux Devtools icon here

or in the browser Devtools

you also should find Redux here as an option.

And if you open that

it will open this Redux Devtools panel here

and now here, you have insights into your Redux store

into your actions and much more.

On the left side, you for example, see the actions

that were dispatched.

And if I reload, we see that's in it and replace cart.

In it, is this automatically dispatched first action

that applies all your initial states to Redux

so that initializes the store

and replace card was dispatched

because we fetched the card initially.

Now, if I add something to the card, you see

add item to cart was dispatched

and our show notification actions which makes sense

because these are all the actions

which are being dispatched when we add an item.

First add item to cart it's dispatched

and when that card state then changed

user App.js kicks in and dispatches send card data

that's not locked because that itself is not an action type

but instead as part of send card data

we then do dispatch these notification actions

which is why we see them here as well.

And you can click on those actions to get insights

into the data that was transported by that action

and how that changed your state.

You see the data, if you click on action

there you see the payload off the action

and this unique identifier.

Here, we can also see

the automatically created unique identifiers

Redux toolkit gives us

as you see it's basically your slice name.

So, in card it's this slice name

and then the method name of this reducer method

that is the unique identifier created by Redux toolkit

and then here we have our payload.

We also see how the state looks like there after.

So, how the state looks after this action was performed

and we see how it was updated if we click on diff.

Therefore add item to cart

we see that the total quantity was changed from six to seven

changed one set from false to true and in the items

we see that the quantity of that first item changed

and so on.

So, that's super useful to understand the impact

of your actions.

You can even do something which is called time traveling.

You can jump to an older state like this one

by clicking on it and then clicking on jump

and you see now the notification is gone

and we're back to the card with six items.

And we can then start debugging here again if we want to

and we can then also jump back

to a newer state if we want to.

So, that can be really convenient

and therefore the Redux Devtools are a piece of software

I can only encourage you to use and play around with

to get deeper insights into your Redux store

and to debug your Redux behavior

and fully understand what's going on.