WEBVTT 00:00.350 --> 00:00.770 Okay. 00:00.770 --> 00:04.370 So as mentioned we're going to take a look at Redux DevTools. 00:04.370 --> 00:08.240 And that's one of the things that we can use when we're using Redux in our application. 00:08.240 --> 00:11.600 And this is one of the greatest DevTools I think I've ever seen. 00:11.600 --> 00:18.050 It's very useful for helping us troubleshoot anything Redux related, anything that's problematic in 00:18.050 --> 00:20.270 our states where we can go and get information. 00:20.270 --> 00:23.180 So let's search for Redux DevTools in Google. 00:23.180 --> 00:27.260 This is another Chrome extension that we're going to need to add to our browser. 00:27.350 --> 00:32.720 And I mentioned it before, but I would really highly recommend that you just keep a browser like Chrome 00:32.720 --> 00:37.550 specifically for development that contains your development extensions like this. 00:37.550 --> 00:43.340 And then for all other browsing, use brave or something else and then just keep this one for development. 00:43.340 --> 00:45.200 So great, now I've got this installed. 00:45.200 --> 00:46.460 What does this give us? 00:46.460 --> 00:53.720 Well, if we go to right click and inspect then let's take a look at what we now have inside here. 00:53.870 --> 00:59.420 And annoyingly I don't see it on this list and I've got to go and click it from this side. 00:59.420 --> 01:05.720 So this is Redux DevTools in the tab down here you may see a button if you've got the screen resolution. 01:05.720 --> 01:07.440 My extensions are not showing up. 01:07.440 --> 01:09.900 Or maybe I need to enable the extension there. 01:09.900 --> 01:12.780 And it's telling me that there's no store found. 01:12.870 --> 01:13.200 Mm. 01:13.230 --> 01:14.130 Well that's disappointing. 01:14.160 --> 01:17.640 Let me refresh the page because I'm pretty sure we will get a store. 01:17.640 --> 01:19.320 And sure enough, now we do. 01:19.350 --> 01:23.250 Now, there's not a huge amount going on at the moment because we don't have much data. 01:23.250 --> 01:29.100 We've got a simple counter, but this will give us an adequate demonstration of these tools and how 01:29.100 --> 01:30.450 useful they can be. 01:30.480 --> 01:35.700 So first of all, if we click on this we're going to see the initial state of our store. 01:35.820 --> 01:38.100 So please make sure you've clicked on the Redux tab. 01:38.100 --> 01:39.990 And then click on init. 01:39.990 --> 01:45.300 And over on the right hand side we can see the difference between what the state was before and what 01:45.300 --> 01:45.990 the state is now. 01:45.990 --> 01:48.330 We don't see anything there because we're just on the init. 01:48.330 --> 01:54.990 But if we do take a look at the states, then we can see our states, our counter slice and again limited 01:54.990 --> 01:56.280 amounts going on here. 01:56.280 --> 01:59.070 Because all it's going to tell us is the data is 42. 01:59.100 --> 02:00.960 But let's start clicking things. 02:00.960 --> 02:06.840 And if I increment then we can see the action that's been sent or dispatched to our store. 02:06.840 --> 02:09.420 And we can see the data has gone up. 02:09.420 --> 02:10.620 So I'll increment again. 02:10.620 --> 02:17.030 And then I'll increment by five and then I'll decrement and then I'll increment, for example. 02:17.060 --> 02:22.970 And if we go down to the bottom one then we can see that the data is on 49 which matches what's going 02:22.970 --> 02:24.470 on in our browser. 02:24.500 --> 02:31.010 So when a state change happens in our store, if we take a look at the action tab, we can see what 02:31.040 --> 02:33.650 type of action was responsible. 02:33.650 --> 02:35.240 And we can also see the payload. 02:35.240 --> 02:37.670 So one of these increments was a payload of five. 02:37.670 --> 02:41.240 And if I click on this one then we can see that payload is five. 02:41.240 --> 02:47.780 If we take a look at the state at this time then we can see that the counter at that point was 49. 02:47.930 --> 02:51.530 And we can also see the difference between what it was and what it is now. 02:51.530 --> 02:57.740 So previously it was 44, but after that action then this state is 49. 02:57.770 --> 03:03.080 Obviously in such a simple example like this, we're not going to see a huge benefit of this. 03:03.080 --> 03:08.090 But what we also get here is effectively what they refer to as time travel debugging. 03:08.090 --> 03:12.470 We can go and jump to a specific state change. 03:12.470 --> 03:18.200 And if I jump notice that the browser changes as well. 03:18.800 --> 03:24.090 So we can see the live updates in our browser based on what state was taken or what action was affecting 03:24.090 --> 03:26.340 our state at the time it happened. 03:26.790 --> 03:32.130 So we can hit the play button and then it's going to play through the different state options. 03:32.160 --> 03:35.160 And we can see that going on in the browser as well as it happens. 03:35.160 --> 03:36.810 And it's a really cool tool. 03:36.810 --> 03:43.440 And anything that we do that affects our store, we'll be able to get information from this inside here. 03:43.470 --> 03:48.660 Not particularly useful at the moment, I agree because of the limited amount of code we've got to work 03:48.660 --> 03:49.680 with just now. 03:50.070 --> 03:55.350 But as we implement the functionality that we're going to use with our Redux store, we're soon going 03:55.380 --> 04:01.350 to be looking at async functionality so that we can go and get our products from the store and then 04:01.350 --> 04:07.260 effectively store them in our store, and then we'll be able to see what's going on using these tools 04:07.260 --> 04:07.740 as well. 04:07.740 --> 04:11.310 So highly recommended that you add these to your browser. 04:11.310 --> 04:18.390 I believe there's a version available for Edge and Firefox as well, although to be honest, I only 04:18.390 --> 04:24.990 ever use Chrome for development, so I've never even looked and tested them on other browsers, but 04:25.010 --> 04:27.350 I'm sure there are versions of this available for that. 04:27.350 --> 04:29.570 So just another good tool in the toolbox. 04:29.570 --> 04:32.450 If we run into problems, then we've got somewhere else to look. 04:32.450 --> 04:38.300 So we've got our console to see any console output that we either manually implement and add ourselves. 04:38.300 --> 04:42.950 We've got our network tab to see what's going on with our API request to our server. 04:42.950 --> 04:46.670 We've got our react tools that will give us information about our components. 04:46.670 --> 04:51.620 And now we've got a Redux tool that's going to tell us about our global state in our application. 04:51.620 --> 04:53.300 So tools in our toolbox. 04:53.300 --> 04:57.740 And we never want to be troubleshooting in a position like this where something isn't working as we'd 04:57.740 --> 04:58.730 expect it to. 04:58.760 --> 05:01.370 And this is what we're looking at for information. 05:01.370 --> 05:06.530 So please do take advantage of the excellent developer tools at our disposal. 05:06.530 --> 05:07.220 So great. 05:07.250 --> 05:08.810 Now we've got that in place. 05:08.810 --> 05:15.140 What we're going to take a look at next is how we're going to make asynchronous requests to our API 05:15.530 --> 05:18.050 or HTTP request to our API. 05:18.080 --> 05:25.850 And it's something else that comes with Redux Toolkit called Redux Toolkit Query or RTK query. 05:25.850 --> 05:29.510 That's what we're going to be using to make asynchronous requests. 05:29.510 --> 05:31.790 And we'll take a look at that next.