1 00:00:01,000 --> 00:00:05,090 In this video there's one other very quick thing I want to show you with redux dev tools. 2 00:00:05,110 --> 00:00:09,640 This is not going to be a feature that is immediately super useful for us but we're going to end up 3 00:00:09,670 --> 00:00:14,450 making use of this other feature in redux stepped tools at great length later on inside this course. 4 00:00:14,590 --> 00:00:18,600 So let me tell you what this little feature is inside of our address bar. 5 00:00:18,610 --> 00:00:22,510 We're going to navigate to our application at local host Colin 3000. 6 00:00:22,540 --> 00:00:25,590 But then we're going to put on this little query string right here. 7 00:00:25,670 --> 00:00:30,730 We're going to put on a question mark de-bug underscore session equals and then some random string of 8 00:00:30,730 --> 00:00:31,750 characters. 9 00:00:31,930 --> 00:00:37,420 When you do this redux step tools is going to see that you are trying to start up a debug session a 10 00:00:37,420 --> 00:00:42,880 debug session is where redux dev tools is going to automatically save all of the data inside of your 11 00:00:42,880 --> 00:00:47,620 redux store and persist it across refreshes of your application. 12 00:00:47,620 --> 00:00:52,660 So you'd normally when we refresh our application all the data inside of a redux store falls away and 13 00:00:52,660 --> 00:00:53,990 we lose it entirely. 14 00:00:54,070 --> 00:00:59,050 When you enable this debug session redux step tools is going to make sure that all the data stays around 15 00:00:59,200 --> 00:01:01,240 between refreshes of the page. 16 00:01:01,240 --> 00:01:05,980 So this is incredibly useful when we start doing some advanced feature development and we're going to 17 00:01:05,980 --> 00:01:08,660 see how useful it is later on inside the course. 18 00:01:08,680 --> 00:01:11,870 Let's very quickly check out this little feature and see how it works. 19 00:01:12,150 --> 00:01:18,040 So I'm going to go back to my application and in the address bar I'm going to go to question mark de-bug 20 00:01:18,130 --> 00:01:21,230 underscore session and then some random string of characters. 21 00:01:21,280 --> 00:01:27,330 Like so now once I'm here I'm then going to sign out and then sign back in. 22 00:01:30,070 --> 00:01:34,420 Now when I do so you'll notice I now have a couple of actions that have been dispatched to my store. 23 00:01:34,420 --> 00:01:40,210 I have the initial sign in from when I refreshed the page I have a sign out from when I click the sign 24 00:01:40,210 --> 00:01:44,010 out button and I have another sign in from when I sign back in. 25 00:01:44,020 --> 00:01:49,980 Now here's the magic if I refreshed this page I'm still going to see the same list of actions here. 26 00:01:50,230 --> 00:01:55,960 So redux dev tools has persisted all those actions and all the states across the refresh and we have 27 00:01:55,960 --> 00:01:59,260 not dropped off or lost any data. 28 00:01:59,290 --> 00:02:03,490 What's really great about this is that we can now go back and jump to some previous state just as we 29 00:02:03,490 --> 00:02:08,560 did before by clicking that little jump button where it could jump to the sign in or back to present 30 00:02:08,590 --> 00:02:11,900 which would be the most recent sign in right there. 31 00:02:12,040 --> 00:02:14,520 Like I said this is really useful for debugging. 32 00:02:14,530 --> 00:02:17,860 And we're going to use this at great length later on it inside the course. 33 00:02:17,860 --> 00:02:21,940 One thing I want you to be aware of is that once you're done with a debug session you are going to want 34 00:02:21,940 --> 00:02:28,120 to remove that query string out of your otherwise redux step tools are just going to continuously try 35 00:02:28,120 --> 00:02:30,860 to throw your previous state into your store. 36 00:02:30,910 --> 00:02:32,630 And sometimes you really don't want that. 37 00:02:32,740 --> 00:02:37,960 Particularly if you change some reduce search or return some other form of data like maybe an array 38 00:02:37,960 --> 00:02:39,450 instead of an object. 39 00:02:39,550 --> 00:02:43,830 If you continue running 80 bucks session you'll very quickly start to run into errors because redux 40 00:02:43,960 --> 00:02:48,210 tools is trying to throw data into your stored that is no longer valid. 41 00:02:48,240 --> 00:02:54,830 Now the other thing I want to show you really quickly is sometimes we might want to have some named 42 00:02:54,890 --> 00:03:02,460 debug sessions so maybe I would give this one a name of like logged in like so and then I would make 43 00:03:02,460 --> 00:03:08,190 sure that inside this debug session I am logged in and then maybe I will make another debug session 44 00:03:08,190 --> 00:03:13,090 called logged out like so and then I could sign out here. 45 00:03:13,140 --> 00:03:17,970 So now I have two separate debug sessions that are running one where I am logged in the other where 46 00:03:18,000 --> 00:03:19,530 I am not logged in. 47 00:03:19,560 --> 00:03:24,570 So if I wanted to I can now easily go back to the previous debug session like go into a logged underscore 48 00:03:24,600 --> 00:03:28,320 in and I'm going to essentially retrieve the previous state that I had. 49 00:03:28,320 --> 00:03:33,720 You can actually see over here the previous state from the logged in debug session had me signed in. 50 00:03:33,900 --> 00:03:39,990 Now immediately after I loaded the page the API libraries said oh you're not signed in anymore because 51 00:03:39,990 --> 00:03:44,160 I actually had signed out so it's going to dispatch the sign out action but essentially by creating 52 00:03:44,160 --> 00:03:48,870 these different debug sessions I can have these different kind of checkpoints of state inside of my 53 00:03:48,870 --> 00:03:49,580 application. 54 00:03:49,620 --> 00:03:54,020 That again makes it really easy to develop and debug certain features. 55 00:03:54,030 --> 00:03:55,060 Now just one more time. 56 00:03:55,080 --> 00:03:59,180 Remember any time that you are done with the debug session make sure you take off that query string. 57 00:03:59,190 --> 00:04:02,790 Otherwise you're going to try to throw some data into your store that you probably don't want to throw 58 00:04:02,790 --> 00:04:03,560 in. 59 00:04:03,630 --> 00:04:05,620 So I'm going to go back to local history. 60 00:04:05,760 --> 00:04:10,710 We'll take a pause right here and this time we will actually continue with redux for him in the next 61 00:04:10,710 --> 00:04:11,180 video. 62 00:04:11,250 --> 00:04:13,520 So quick pause and I'll see you in just a minute.