1 00:00:01,050 --> 00:00:02,910 ‫So I believe I mentioned 2 00:00:02,910 --> 00:00:05,670 ‫in the beginning of the section that Redux 3 00:00:05,670 --> 00:00:09,840 ‫comes with amazing developer tools, just like React 4 00:00:09,840 --> 00:00:13,773 ‫and so let's now install and use those dev tools. 5 00:00:15,300 --> 00:00:17,550 ‫And just like with Middleware, 6 00:00:17,550 --> 00:00:22,410 ‫installing the Redux dev tools is a three step process. 7 00:00:22,410 --> 00:00:26,550 ‫So first we need to install the Google Chrome extension. 8 00:00:26,550 --> 00:00:29,250 ‫So let's do that immediately. 9 00:00:29,250 --> 00:00:32,610 ‫So Redux dev tools 10 00:00:32,610 --> 00:00:36,333 ‫and so then it is this first Google Chrome extension. 11 00:00:38,010 --> 00:00:40,080 ‫So I already have that installed 12 00:00:40,080 --> 00:00:43,530 ‫but please go ahead and install this one now. 13 00:00:43,530 --> 00:00:47,550 ‫So again, just like the React dev tools. 14 00:00:47,550 --> 00:00:50,760 ‫Then next up we actually need to also install 15 00:00:50,760 --> 00:00:53,580 ‫the corresponding NPM package 16 00:00:53,580 --> 00:00:56,800 ‫and so that one is called NPM install 17 00:00:57,840 --> 00:01:02,307 ‫Redux dev tools extension. 18 00:01:06,090 --> 00:01:07,593 ‫So let's wait for it. 19 00:01:08,580 --> 00:01:11,577 ‫That should be pretty fast and there we go. 20 00:01:11,577 --> 00:01:16,577 ‫And so now this NPM package gives us one function 21 00:01:16,620 --> 00:01:17,673 ‫that we need to use. 22 00:01:19,680 --> 00:01:22,730 ‫So let's bring in ComposeWithDevTools. 23 00:01:24,900 --> 00:01:27,330 ‫So exactly this one 24 00:01:27,330 --> 00:01:31,200 ‫and so now this is gonna look a little bit weird 25 00:01:31,200 --> 00:01:36,200 ‫because what we need to do is to wrap this apply middleware 26 00:01:38,010 --> 00:01:40,473 ‫in the compost with dev tools. 27 00:01:43,200 --> 00:01:47,340 ‫Give it a save and with this we should be good to go. 28 00:01:47,340 --> 00:01:50,940 ‫So again, it doesn't really matter why this is the way 29 00:01:50,940 --> 00:01:55,200 ‫we have to write it, but well this is it 30 00:01:55,200 --> 00:02:00,200 ‫and so now here you should get a new tab for Redux 31 00:02:00,570 --> 00:02:02,670 ‫and in case it doesn't show up for you, 32 00:02:02,670 --> 00:02:05,703 ‫then just make sure to restart your browser. 33 00:02:06,660 --> 00:02:11,660 ‫So let's click there and here are our dev tools. 34 00:02:12,150 --> 00:02:14,340 ‫So let's make our window bigger 35 00:02:14,340 --> 00:02:16,380 ‫and this whole thing a bit smaller 36 00:02:16,380 --> 00:02:18,783 ‫and then let's explore this. 37 00:02:20,250 --> 00:02:23,130 ‫So what we need to do here to test this 38 00:02:23,130 --> 00:02:26,043 ‫is to dispatch some actions. 39 00:02:27,630 --> 00:02:28,803 ‫So let's do that. 40 00:02:30,090 --> 00:02:31,740 ‫And there we go. 41 00:02:31,740 --> 00:02:36,360 ‫So here we now see our first action that was dispatched. 42 00:02:36,360 --> 00:02:38,823 ‫So with the name of customer/createCustomer. 43 00:02:40,590 --> 00:02:44,250 ‫And so then here we can see the action object. 44 00:02:44,250 --> 00:02:47,010 ‫So again, with the type and the payload 45 00:02:47,010 --> 00:02:49,020 ‫and then the state that resulted 46 00:02:49,020 --> 00:02:51,093 ‫from dispatching this action. 47 00:02:52,740 --> 00:02:55,800 ‫All right, and if we keep going here 48 00:02:55,800 --> 00:02:59,073 ‫let's say we deposit $200. 49 00:03:01,260 --> 00:03:05,250 ‫And so then again we see the new state that has been created 50 00:03:05,250 --> 00:03:08,070 ‫after this action has been dispatched 51 00:03:08,070 --> 00:03:11,370 ‫and we can see the action itself as well 52 00:03:11,370 --> 00:03:15,840 ‫and let's try that again, but this time converting 53 00:03:15,840 --> 00:03:20,840 ‫from US Dollar or actually from Euro to US Dollar. 54 00:03:20,910 --> 00:03:24,390 ‫And then what happened down here? 55 00:03:24,390 --> 00:03:29,370 ‫So now we do indeed get our two actions dispatched. 56 00:03:29,370 --> 00:03:31,983 ‫So first the converting currency action. 57 00:03:33,510 --> 00:03:36,940 ‫So this one right here, which will set our state 58 00:03:37,860 --> 00:03:41,940 ‫here in the account to loading, right? 59 00:03:41,940 --> 00:03:44,520 ‫And then this next one here where we then, 60 00:03:44,520 --> 00:03:48,150 ‫after that value has arrived, finally deposit. 61 00:03:48,150 --> 00:03:50,880 ‫So it's loading is then back to false 62 00:03:50,880 --> 00:03:54,180 ‫and then we see our new balance right here. 63 00:03:54,180 --> 00:03:58,593 ‫And so the action that was dispatched this time was 109. 64 00:04:00,368 --> 00:04:03,660 ‫Now, okay, let's try another one 65 00:04:03,660 --> 00:04:07,320 ‫so that afterwards I can show you the coolest feature 66 00:04:07,320 --> 00:04:09,240 ‫of these dev tools. 67 00:04:09,240 --> 00:04:13,230 ‫So basically what we can do is to now jump around 68 00:04:13,230 --> 00:04:16,320 ‫between these different state transitions. 69 00:04:16,320 --> 00:04:19,470 ‫So for example, we can say that we want to jump back 70 00:04:19,470 --> 00:04:21,570 ‫to this place right here 71 00:04:21,570 --> 00:04:25,950 ‫and so then you see that our balance is back to 200 72 00:04:25,950 --> 00:04:29,610 ‫because at this point we only had deposited once 73 00:04:29,610 --> 00:04:32,013 ‫and we had deposited only 200. 74 00:04:33,420 --> 00:04:35,790 ‫Can also say that we want to jump here. 75 00:04:35,790 --> 00:04:37,950 ‫And so then at this point 76 00:04:37,950 --> 00:04:42,150 ‫notice how the state is still completely empty. 77 00:04:42,150 --> 00:04:43,773 ‫So we have no balance yet. 78 00:04:45,481 --> 00:04:49,830 ‫And so yeah, this was basically the very initial state 79 00:04:49,830 --> 00:04:53,700 ‫and even cooler than that is that we can even use the slider 80 00:04:53,700 --> 00:04:58,410 ‫down here to move through these state transitions like this 81 00:04:58,410 --> 00:05:00,850 ‫and so watch as to balance there updates 82 00:05:01,740 --> 00:05:03,150 ‫So here in the very beginning, 83 00:05:03,150 --> 00:05:05,460 ‫we don't even have a customer yet. 84 00:05:05,460 --> 00:05:10,460 ‫So that's when we then input our name and ID. 85 00:05:10,500 --> 00:05:14,613 ‫So then we came here, then we deposited for the first time, 86 00:05:15,540 --> 00:05:17,490 ‫then we deposited again, 87 00:05:17,490 --> 00:05:20,310 ‫which then triggered this conversion. 88 00:05:20,310 --> 00:05:23,910 ‫So here then the state was at loading through. 89 00:05:23,910 --> 00:05:27,930 ‫Then afterwards we got this new balance 90 00:05:27,930 --> 00:05:31,230 ‫and then in the end we got down to 59 91 00:05:31,230 --> 00:05:33,183 ‫because of this last withdrawal. 92 00:05:34,110 --> 00:05:38,430 ‫Okay, so I think that you can see how this can be really, 93 00:05:38,430 --> 00:05:41,400 ‫really useful if you have a lot of different 94 00:05:41,400 --> 00:05:44,940 ‫state transitions and a really complex state. 95 00:05:44,940 --> 00:05:47,400 ‫So then you can basically time travel 96 00:05:47,400 --> 00:05:51,090 ‫between these different transitions in order to maybe find 97 00:05:51,090 --> 00:05:54,720 ‫some bug or some problem that you have. 98 00:05:54,720 --> 00:05:58,833 ‫We can also actually manually dispatch some actions here. 99 00:06:00,780 --> 00:06:05,160 ‫And I think that we have one that is named 100 00:06:05,160 --> 00:06:09,360 ‫account/updatename. 101 00:06:09,360 --> 00:06:12,213 ‫I'm not sure of this, but let's try. 102 00:06:13,470 --> 00:06:14,303 ‫Payload. 103 00:06:17,880 --> 00:06:20,463 ‫Let's say test, and then let's dispatch. 104 00:06:22,200 --> 00:06:24,483 ‫And well that didn't really do anything. 105 00:06:29,820 --> 00:06:32,220 ‫So let's check out our code. 106 00:06:32,220 --> 00:06:37,220 ‫So here in the customer slice. 107 00:06:40,860 --> 00:06:43,413 ‫Well it's actually called account name. 108 00:06:47,940 --> 00:06:51,660 ‫So maybe there's some typo there, but not really. 109 00:06:51,660 --> 00:06:53,850 ‫Well for some reason that doesn't work 110 00:06:53,850 --> 00:06:56,430 ‫but it's also not really important. 111 00:06:56,430 --> 00:06:58,233 ‫So let's just close this here. 112 00:07:00,450 --> 00:07:03,870 ‫So you see that our state didn't really change 113 00:07:03,870 --> 00:07:05,940 ‫as a consequence of this, 114 00:07:05,940 --> 00:07:08,343 ‫which is now leaving me really intrigued. 115 00:07:09,480 --> 00:07:12,483 ‫Let me check out again, something must be wrong. 116 00:07:14,550 --> 00:07:16,950 ‫Ah, okay, I see. 117 00:07:16,950 --> 00:07:19,590 ‫So here we have the correct name, 118 00:07:19,590 --> 00:07:23,010 ‫which is customer/updatename, but for some reason 119 00:07:23,010 --> 00:07:24,690 ‫then here we have a bug. 120 00:07:24,690 --> 00:07:28,947 ‫So here it should also be customerupdatename. 121 00:07:30,641 --> 00:07:32,974 ‫So ah, now everything reset. 122 00:07:34,740 --> 00:07:38,883 ‫So let's try again with the initial data. 123 00:07:41,820 --> 00:07:44,580 ‫Let's just deposit something here 124 00:07:44,580 --> 00:07:47,943 ‫and then let me dispatch that action. 125 00:07:50,100 --> 00:07:54,490 ‫So customer and then the payload of test. 126 00:07:58,110 --> 00:08:02,550 ‫Let's dispatch and yeah, so now it actually updated 127 00:08:02,550 --> 00:08:04,410 ‫the name right here. 128 00:08:04,410 --> 00:08:07,080 ‫So again, this can be quite helpful if you just 129 00:08:07,080 --> 00:08:09,510 ‫want to manually dispatch some actions 130 00:08:09,510 --> 00:08:12,420 ‫without having to wire up like some buttons 131 00:08:12,420 --> 00:08:13,720 ‫in the user interface 132 00:08:16,050 --> 00:08:19,833 ‫and now let me just find a bug here. 133 00:08:20,850 --> 00:08:23,940 ‫So let's try to deposit again 134 00:08:23,940 --> 00:08:26,793 ‫and so now this will actually create a problem. 135 00:08:27,960 --> 00:08:32,070 ‫So notice that when I clicked here, it actually dispatched 136 00:08:32,070 --> 00:08:36,060 ‫the action of account converting currency. 137 00:08:36,060 --> 00:08:38,340 ‫So that's strange, right? 138 00:08:38,340 --> 00:08:40,770 ‫So let's see what happened there. 139 00:08:40,770 --> 00:08:45,150 ‫So where is this action here actually dispatched? 140 00:08:45,150 --> 00:08:48,090 ‫Well, it is dispatched of course, 141 00:08:48,090 --> 00:08:53,090 ‫right here in the account slides right here. 142 00:08:53,310 --> 00:08:56,130 ‫However, this should only run if the currency 143 00:08:56,130 --> 00:08:58,170 ‫is not US Dollar. 144 00:08:58,170 --> 00:09:01,740 ‫But here in the user interface it clearly was. 145 00:09:01,740 --> 00:09:04,350 ‫So this means that we have some problem. 146 00:09:04,350 --> 00:09:07,800 ‫So let's come to that component 147 00:09:07,800 --> 00:09:11,940 ‫and here we actually already can see the problem. 148 00:09:11,940 --> 00:09:14,640 ‫So here after we dispatch, 149 00:09:14,640 --> 00:09:17,100 ‫so after we deposit for the first time, 150 00:09:17,100 --> 00:09:21,360 ‫we then reset the currency back to this empty string, 151 00:09:21,360 --> 00:09:24,543 ‫while the initial state is actually USD. 152 00:09:25,680 --> 00:09:28,590 ‫So then the second time we try to convert 153 00:09:28,590 --> 00:09:31,950 ‫it is not the USD currency that gets into 154 00:09:31,950 --> 00:09:34,450 ‫the action creator, but an empty string 155 00:09:35,550 --> 00:09:40,440 ‫and so this tool just helped us here a little bit 156 00:09:40,440 --> 00:09:43,140 ‫with finding this problem. 157 00:09:43,140 --> 00:09:47,373 ‫Now here we need to reload to get rid of this initial error. 158 00:09:50,730 --> 00:09:55,730 ‫Then let's try $100 and then let's just try that again. 159 00:09:56,310 --> 00:09:59,340 ‫And so now it is fixed. 160 00:09:59,340 --> 00:10:02,670 ‫Great, so I think with this you get the gist 161 00:10:02,670 --> 00:10:06,060 ‫of how this dev tool extension here works. 162 00:10:06,060 --> 00:10:08,700 ‫So if you want, you can play around a little bit more 163 00:10:08,700 --> 00:10:11,370 ‫with this and do your own experiments 164 00:10:11,370 --> 00:10:13,410 ‫and then once you're done with that, 165 00:10:13,410 --> 00:10:18,093 ‫let's move on to the more modern Redux with Redux Toolkit.