Redux Devtools

In this lesson, we're going to install and use Redux Devtools

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.

Thumbnail for the \newline course The newline Guide to Fullstack ASP.NET Core and React

  • [00:00 - 00:08] In this lecture, we are going to look at one of the most important tools available for Redux. And that is Redux DevTools extension.

    [00:09 - 00:15] We will see how to install it and its usage. Make sure you are using Google Chrome or Firefox.

    [00:16 - 00:29] Make a search on Google with Redux DevTools extension for and write your browser name. And once you find it, you can click on it and click on add to your browser.

    [00:30 - 00:34] And that's it and that will be available to use. Make sure your server is running.

    [00:35 - 00:45] And if it's running, you will find your DevTools extension here. Now if your application is running and you click on this icon, you will see all the Redux states we have been using.

    [00:46 - 00:55] A better way to use it is by doing right click and clicking on inspect. And here you will find Redux and you can see everything here.

    [00:56 - 01:14] Now if you notice we have diff which shows the difference between the previous state and the latest update. If you remember we are making get basket call as soon as the application is rendering, we have given it the initial value to be null and we can see the client ID but no items at all.

    [01:15 - 01:32] If we click on state, we see all the reducers we have, we have login with visits initialized to be one, we have the basket and we have the course. And if you click on course, we have IDs and entities.

    [01:33 - 01:39] This is what create entity adapter is doing. Man we will make the call using the async tongue.

    [01:40 - 01:53] It will make an API request and get a response and save it here. It will take course ID from every course and save it inside the IDs and the particular course inside the entities like this.

    [01:54 - 02:04] So this ID has this entity with all its properties. This tool is very handy to see how the state has changed and what was the previous state.

    [02:05 - 02:12] Let me show you. Let me click on add to basket and I click here and if I see I see one.

    [02:13 - 02:25] Now if I click here and click on diff, now you see we have an item inside our basket. You see how it has changed?

    [02:26 - 02:41] We had no items but now we see a course ID here and if you want, you can also operate it from here and for example, you want to go back to a state. So let's add something to the basket again and let me add this one.

    [02:42 - 02:55] And now if I click here and this is the latest one which we dispatched. So if I click on back, you see that item again is out of the cart and we see one as the count.

    [02:56 - 03:02] And if I want to go back to that position, now we see two and go to the cart. Isn't it cool?

    [03:03 - 03:10] It can be really useful when something's not working right with the state. You can simply come here and check by going to the previous state.

    [03:11 - 03:14] Well, this was it about the Redux DevTools. Let's move on to the next lecture now.