1 00:00:00,760 --> 00:00:04,960 We're all done with authentications side of our application we're now going to start to very quickly 2 00:00:04,960 --> 00:00:10,210 start to work on giving our users the ability to create a new stream by putting this form together right 3 00:00:10,210 --> 00:00:10,820 here. 4 00:00:11,110 --> 00:00:16,000 Now as soon as we start talking about forums and redux we're going to begin covering a new library called 5 00:00:16,060 --> 00:00:22,180 redux form redux farm is a little bit notorious for being just a tiny bit challenging to understand 6 00:00:22,420 --> 00:00:27,010 but the only reason that is challenging to understand is that it's hard to understand what redux form 7 00:00:27,010 --> 00:00:29,330 is doing inside of your redux store. 8 00:00:29,410 --> 00:00:34,240 Now in order to make the process of learning redux form a lot easier I can't tell you about a little 9 00:00:34,240 --> 00:00:40,180 extension that we're going to use to make debugging your redux application a lot easier if you install 10 00:00:40,180 --> 00:00:44,350 this little extension inside your browser and wired up appropriately. 11 00:00:44,380 --> 00:00:48,610 It's going to allow you to take a look at the data inside of your redux store very easily which will 12 00:00:48,610 --> 00:00:51,190 make learning redux form really straightforward. 13 00:00:51,430 --> 00:00:53,850 So we're going to put a link on the screen. 14 00:00:53,870 --> 00:00:55,690 Here it is right here. 15 00:00:55,780 --> 00:01:01,410 So I'm going to copy this link and open up a new browser tab and jump over to it. 16 00:01:02,780 --> 00:01:03,060 OK. 17 00:01:03,080 --> 00:01:06,440 So when I say extension I really do mean an extension. 18 00:01:06,440 --> 00:01:08,930 This is a Chrome extension right here. 19 00:01:08,930 --> 00:01:14,080 You can use this tool either with Chrome as an extension or also with Firefox as well. 20 00:01:14,080 --> 00:01:18,770 This is a browser extension that is going to allow you to very easily debug your redux store. 21 00:01:19,070 --> 00:01:22,230 You can very easily understand that or what data is inside of it. 22 00:01:22,250 --> 00:01:25,790 And it also lets you do a couple of other interesting things very easily. 23 00:01:25,790 --> 00:01:29,990 Let's first figure out how to wire this tool up and I'll show you exactly how you can use it inside 24 00:01:29,990 --> 00:01:31,150 of your application. 25 00:01:31,190 --> 00:01:34,980 And we're going to also use it quite a bit when we start putting redux form together. 26 00:01:35,390 --> 00:01:41,930 So the installation directions for this are down inside the read me of this get have repository it's 27 00:01:41,930 --> 00:01:43,860 all find the installation section right here. 28 00:01:43,970 --> 00:01:47,680 You'll see directions to install this for the Chrome browser or for Firefox. 29 00:01:47,840 --> 00:01:49,580 If you're using any other browser. 30 00:01:49,580 --> 00:01:51,810 Unfortunately there is no support for it. 31 00:01:51,930 --> 00:01:57,410 But I would still really encourage you to make use of chrome or Firefox for the rest of this application 32 00:01:57,410 --> 00:02:01,120 that we're building just because this tool is so incredibly useful. 33 00:02:01,300 --> 00:02:06,700 So to install this with chrome or Firefox you click on the appropriate link so this will take you to 34 00:02:06,700 --> 00:02:10,660 the Chrome store or the Firefox store where you can easily click a button up your on the top right hand 35 00:02:10,660 --> 00:02:12,560 side to install it into your browser. 36 00:02:12,910 --> 00:02:19,510 Once it is installed you're going to see a little kind of I don't know satellites or solar system icon 37 00:02:19,510 --> 00:02:21,120 up here on the toolbar up here. 38 00:02:21,280 --> 00:02:23,950 That's the redux tools icon right there. 39 00:02:24,340 --> 00:02:29,470 So once we get that thing installed we then have to add a tiny bit of code to set up our application 40 00:02:29,650 --> 00:02:36,380 to hook in to these redux stepped tools or that will scroll down a little bit more and we're going to 41 00:02:36,380 --> 00:02:40,130 find the section marked advanced store setup right here. 42 00:02:40,130 --> 00:02:43,900 So essentially all we have to add in is what you see in the green text. 43 00:02:44,060 --> 00:02:50,510 We're going to import a little helper from redux called compose and we're also going to apply the middleware 44 00:02:50,510 --> 00:02:50,840 as well. 45 00:02:50,840 --> 00:02:53,510 We don't have any middleware right now but we will eventually. 46 00:02:53,510 --> 00:02:57,230 So we're going to wire up our application assuming that we're going to have middleware at some point 47 00:02:57,230 --> 00:02:57,790 in time. 48 00:02:58,510 --> 00:02:58,830 OK. 49 00:02:58,890 --> 00:03:04,140 So to Wired this thing up I'm going to go back over to my code editor and find my root index such as 50 00:03:04,140 --> 00:03:15,280 file so inside of here I'm going to find my redux import and I'm going to get apply middleware and this 51 00:03:15,280 --> 00:03:17,140 little composed function as well. 52 00:03:18,190 --> 00:03:23,320 Then right above my store creation right here I'm going to say Konst compose enhancers 53 00:03:26,100 --> 00:03:29,920 equals window dot underscore underscore. 54 00:03:30,000 --> 00:03:31,620 So that is two underscores right there. 55 00:03:31,620 --> 00:03:33,450 Make sure you have two as well. 56 00:03:33,450 --> 00:03:41,730 Redux dev tools extension compose and then underscore underscore 57 00:03:44,690 --> 00:03:53,660 I'll then put down a or statement or or operator and I'll say or compose and then finally on my create 58 00:03:53,670 --> 00:04:00,380 store call right here I'm going to get myself a little bit of space by expanding the call like so I'll 59 00:04:00,380 --> 00:04:05,840 make sure I get a comma after reduce hours and then as a second argument I'll say compose enhancers 60 00:04:06,740 --> 00:04:11,920 apply middleware and I'll close off the call like that. 61 00:04:11,940 --> 00:04:15,930 So we do not yet have any middle where we are going to eventually have redux thunk installed in this 62 00:04:15,930 --> 00:04:18,530 project but we have not installed it just yet. 63 00:04:18,540 --> 00:04:23,430 Nonetheless we can still call applied middleware right now and at least get ready for that call or for 64 00:04:23,430 --> 00:04:24,840 redux thunked to be added. 65 00:04:24,840 --> 00:04:28,830 You can call applied middleware with out any arguments and you're not going to see any error message. 66 00:04:28,890 --> 00:04:30,600 So no issue with this whatsoever. 67 00:04:30,600 --> 00:04:32,300 Eventually we will install redux. 68 00:04:32,320 --> 00:04:36,090 And then we can just throw in dunk like so and that's pretty much it. 69 00:04:36,090 --> 00:04:41,000 All right so going to save this and I'll flip back over to my browser and we'll test out the redux dev 70 00:04:41,010 --> 00:04:41,930 tools. 71 00:04:42,390 --> 00:04:48,910 All right so I get flip back over I'll refresh the page and then once I refreshed the page I should 72 00:04:48,910 --> 00:04:53,940 see that little icon for redux dev tools appear kind of come a light I should see some colors inside 73 00:04:53,950 --> 00:04:54,410 of it. 74 00:04:54,550 --> 00:04:57,750 You'll notice it's slightly green whereas it was kind of gray before. 75 00:04:58,000 --> 00:05:02,550 I can then click on this thing and it's going to expand the dev tools menu right here. 76 00:05:02,710 --> 00:05:07,150 Now something I really recommend you do is click on this kind of middle icon down on the bottom left 77 00:05:07,150 --> 00:05:12,840 hand side that's going to pop these tools out as a separate window like so. 78 00:05:12,870 --> 00:05:13,210 All right. 79 00:05:13,210 --> 00:05:17,460 So let's take a look at this panel right here and get a better idea of what's going on in general. 80 00:05:17,460 --> 00:05:21,660 There are two features that you're going to be using very frequently with these dev tools. 81 00:05:21,660 --> 00:05:26,910 First off if you find this little selector right here of action state diff and test click on states 82 00:05:26,970 --> 00:05:32,170 like so when you click on that that's going to show you the current state inside of a redux store. 83 00:05:32,370 --> 00:05:37,080 So I see that I have my Auth. property coming from the author reducer and that has the is signed in 84 00:05:37,080 --> 00:05:40,110 flag in my user ID as well. 85 00:05:40,110 --> 00:05:47,030 So with this tool I can very easily see all the data that is sitting inside my redux application the 86 00:05:47,030 --> 00:05:51,150 other feature that you're probably going to use very frequently is the left panel over here. 87 00:05:51,200 --> 00:05:56,000 This is a list of all of the different actions that have been dispatched to your redux store. 88 00:05:56,000 --> 00:06:01,660 Now the thing that is really cool about this is that we can very easily kind of jump back in time. 89 00:06:01,670 --> 00:06:03,210 Let me show you what I mean. 90 00:06:03,350 --> 00:06:08,290 I'm going to come back or to my application and I'm going to sign out and then sign back in really quickly. 91 00:06:11,790 --> 00:06:12,090 OK. 92 00:06:12,120 --> 00:06:16,920 So now on the left hand panel over here I see three different actions. 93 00:06:16,920 --> 00:06:19,500 I see a sign in sign out and sign in. 94 00:06:19,560 --> 00:06:23,460 These are the three different actions that have now dispatched inside of my store. 95 00:06:23,520 --> 00:06:28,140 The first action right here was dispatch when I first booted up my application inside the browser. 96 00:06:28,350 --> 00:06:33,470 And then I see the sign out and sign in it from me simply refreshing or to me signing out it's like 97 00:06:33,480 --> 00:06:37,800 clicking sign right there and then signing back in as I did just two seconds ago. 98 00:06:37,900 --> 00:06:42,600 Now the part that is so cool about this is that if you hover over say sign out right here you'll see 99 00:06:42,600 --> 00:06:48,030 this button jump on the right hand side I can click on jump and the state panel over here on the right 100 00:06:48,030 --> 00:06:52,050 hand side is going to change to reflect the state inside of my store. 101 00:06:52,110 --> 00:06:54,170 At that point in time. 102 00:06:54,370 --> 00:07:00,650 So when I had dispatch sign out I now see the state that was inside my store when I had just dispatch 103 00:07:00,650 --> 00:07:04,360 sign out and process that action by all my reducers. 104 00:07:04,420 --> 00:07:09,340 So using this tool we can essentially jump around in the history of your application and get a better 105 00:07:09,340 --> 00:07:13,020 idea of exactly what happened at every point in time. 106 00:07:13,020 --> 00:07:19,980 Now you'll notice if I do a little bit of rearranging here when I click on these different actions or 107 00:07:19,980 --> 00:07:23,790 the jump button for each action I'm not just changing the state that I see down here in this little 108 00:07:23,790 --> 00:07:28,890 pop up window I'm actually changing the state inside of my real redux store. 109 00:07:28,890 --> 00:07:34,650 So if I jump back to say sign in right here you'll notice that the UI changes to reflect the signed 110 00:07:34,650 --> 00:07:35,690 in status. 111 00:07:35,790 --> 00:07:40,140 Well I can now go back to being signed out and that button goes back to saying sign in. 112 00:07:40,140 --> 00:07:43,410 Because now redux thinks I no longer sign into the application. 113 00:07:43,410 --> 00:07:49,200 So as you might guess this tool is an absolute amazing thing to use any time that you're trying to debug 114 00:07:49,290 --> 00:07:50,900 a redux application. 115 00:07:50,910 --> 00:07:55,320 There are even some more features that are even more useful than what we've spoken about so far and 116 00:07:55,320 --> 00:07:59,370 I'll show you some of those other tools and a little bit for right now I want to show you one other 117 00:07:59,370 --> 00:08:01,270 thing that is kind of interesting. 118 00:08:01,320 --> 00:08:06,060 Personally I think it's interesting anyways aside from New browser tab I'm going to navigate to air 119 00:08:06,060 --> 00:08:11,470 b and b dot com and so this is the air in the home page. 120 00:08:11,470 --> 00:08:15,940 I'm going to flip back over to the dev tools over here and then I'll find the drop down on the top right 121 00:08:15,940 --> 00:08:16,690 hand side. 122 00:08:16,780 --> 00:08:18,630 I'm going to select Air B and B. 123 00:08:18,790 --> 00:08:24,550 So at present this might not be true by the time you watch this video but at present European B has 124 00:08:24,610 --> 00:08:29,920 redux dev tools hooked up to their redux store as well and it is publicly visible. 125 00:08:29,920 --> 00:08:37,240 So if you come over here to Air B and B.Com you can actually take a look at your redux dev tools and 126 00:08:37,240 --> 00:08:43,430 you can explore all of the different state that exists inside the redux store that is created by Airbnb. 127 00:08:43,440 --> 00:08:46,750 Yes Aramean uses react and redux internally. 128 00:08:46,750 --> 00:08:51,790 So just for learning sake you can take a look at all the different pieces of state that airband be uses 129 00:08:51,960 --> 00:08:56,620 and could give you a better idea of how you might want to structure your store or your state for a more 130 00:08:56,620 --> 00:08:57,890 complex application. 131 00:08:58,720 --> 00:09:00,760 Now Air B and B is not the only site that does this. 132 00:09:00,760 --> 00:09:05,710 You can find many other sites online that expose redux dev tools as well and you can take a look at 133 00:09:05,710 --> 00:09:11,230 all the data that is stored inside and give you a better idea of how to structure your own application. 134 00:09:11,230 --> 00:09:15,790 Now just so you know if you ever seem to be kind of stuck with your dev tools looking at some other 135 00:09:15,790 --> 00:09:20,590 page or some other product and you want to go back to looking at your redux store you can go back to 136 00:09:20,590 --> 00:09:23,390 the dropdown appear and change it back to react up. 137 00:09:23,410 --> 00:09:26,000 And now I see my piece of state again. 138 00:09:27,100 --> 00:09:27,330 OK. 139 00:09:27,350 --> 00:09:31,310 So like I said we're going to be using Reducto tools quite a bit moving forward and that's going to 140 00:09:31,310 --> 00:09:35,400 make learning the redux format library a lot easier as well. 141 00:09:35,450 --> 00:09:38,540 Now that we understand how this works we'll take a quick pause right here and we'll start working with 142 00:09:38,540 --> 00:09:39,980 redux form in the next video.