1 00:00:00,750 --> 00:00:03,360 We've now got a pretty long time without running any code. 2 00:00:03,360 --> 00:00:07,680 So I think we should try to be line actually testing this thing inside of our simulator. 3 00:00:07,740 --> 00:00:12,450 The first thing we need to do is recognize that inside of our DOT then right here this is where we actually 4 00:00:12,450 --> 00:00:17,130 want to be able to dispatch an action and say hey users now just signed in please do something with 5 00:00:17,130 --> 00:00:18,370 this information. 6 00:00:18,420 --> 00:00:24,270 So rather than cancel logging out the user which we're not actually doing just yet I'm going to dispatch 7 00:00:24,360 --> 00:00:25,860 an action. 8 00:00:25,860 --> 00:00:29,590 So inside of here I'm going to manually dispatch an action. 9 00:00:29,970 --> 00:00:32,890 So I'm going to call dispatch and pass it in action. 10 00:00:32,890 --> 00:00:34,960 I mean that's really what we're doing here. 11 00:00:35,210 --> 00:00:36,380 So when you have a type. 12 00:00:36,390 --> 00:00:40,100 I'm just going to hardcoded it for right now we'll fix it up in just a second. 13 00:00:40,210 --> 00:00:45,910 Logon users success with the payload of the user that was just fetched. 14 00:00:45,930 --> 00:00:48,990 So remember the van is called with a user model. 15 00:00:48,990 --> 00:00:51,650 I'm going to pass it through as the payload property. 16 00:00:51,690 --> 00:00:57,570 Now the whole key here the reason this whole thing works out is that we are not actually calling dispatch 17 00:00:57,630 --> 00:01:02,150 until the request is complete after the quest is complete. 18 00:01:02,220 --> 00:01:08,010 We create our action and we manually pass it off to dispatch the action right here. 19 00:01:08,100 --> 00:01:12,360 As you see it right here it might look you know us a line might look very dissimilar from any of the 20 00:01:12,360 --> 00:01:14,910 other action cars we've we've seen. 21 00:01:14,940 --> 00:01:20,820 But trust me behind the scenes whenever you return an action as we do right here it is getting passed 22 00:01:20,820 --> 00:01:23,750 him to dispatch in the exactly same fashion. 23 00:01:23,760 --> 00:01:28,290 The only difference is that we are manually dispatching ourselves. 24 00:01:28,320 --> 00:01:28,750 All right. 25 00:01:28,800 --> 00:01:31,100 So I think we're just about ready to do a test. 26 00:01:31,110 --> 00:01:34,300 You actually get this thing running inside the simulator. 27 00:01:34,440 --> 00:01:39,510 The first thing I want to do is flip over to my author reducer and I'm going to add in a console log 28 00:01:40,620 --> 00:01:42,000 of action inside of here. 29 00:01:42,030 --> 00:01:45,900 Let's just see every action that comes across and say does this thing actually work or not. 30 00:01:45,900 --> 00:01:49,570 You know how is this thing going then. 31 00:01:49,960 --> 00:01:54,910 The only last thing we have to do is if you recall we don't actually have any sign of functionality 32 00:01:54,910 --> 00:01:59,920 inside of our application right now like we're not we have not yet implemented that try to sign the 33 00:01:59,920 --> 00:02:03,050 user in and then create an account for them if it doesn't exist. 34 00:02:03,490 --> 00:02:09,050 To make sure we actually have an account to test with we can flip over to our authentication console 35 00:02:09,070 --> 00:02:10,260 and firebase. 36 00:02:10,510 --> 00:02:15,310 So on the left hand side of him is click on off and then on the right hand side there's an add user 37 00:02:15,310 --> 00:02:21,400 buttons so we can use this to manually add a user to our project and we can do that to create a test 38 00:02:21,400 --> 00:02:23,950 account for us essentially. 39 00:02:23,980 --> 00:02:29,670 So if the top on the right hand side or click to user and I'm going to make a test user with a e-mail 40 00:02:29,670 --> 00:02:36,580 of test at test come and a password of password go looks good. 41 00:02:36,580 --> 00:02:38,550 So that's my test user to run with. 42 00:02:38,680 --> 00:02:44,320 And the very last thing I need to do is I have an action creator called log and user I need to make 43 00:02:44,320 --> 00:02:46,880 sure that this actually gets called Somewhere in my application. 44 00:02:46,930 --> 00:02:52,300 So we have not yet wired this up to our logon form so let's flip over a log and form. 45 00:02:52,330 --> 00:02:57,740 We're going to import the log in user and hook it up to that button at the bottom. 46 00:02:57,760 --> 00:03:05,470 So first we will import the log in user action action creator excuse me and then at the bottom we will 47 00:03:05,470 --> 00:03:06,940 add it to the connect call. 48 00:03:07,240 --> 00:03:11,680 So here's log in user and this is getting pretty long right here. 49 00:03:11,690 --> 00:03:13,710 I'm going to do some new lines as well. 50 00:03:14,200 --> 00:03:16,520 I think that looks pretty reasonable right there. 51 00:03:16,540 --> 00:03:23,200 So I am giving it the actual creators of email change password change and log in user. 52 00:03:23,620 --> 00:03:23,960 All right. 53 00:03:23,980 --> 00:03:29,050 Last thing to do is find our button and make sure that whenever user presses this thing we actually 54 00:03:29,050 --> 00:03:31,920 call it or call our action creator. 55 00:03:31,940 --> 00:03:39,740 So I'll say on press this dot on button press find this. 56 00:03:39,880 --> 00:03:44,320 And inside of this helper method that we're going to define in just a second is where we will call that 57 00:03:44,320 --> 00:03:45,890 action creator. 58 00:03:46,180 --> 00:03:53,330 So I'll scroll up a little bit and I'll add in the helper method on button press. 59 00:03:53,330 --> 00:03:54,190 All right. 60 00:03:54,700 --> 00:04:01,030 So now we're going to take the e-mail and password from our prop's object. 61 00:04:01,030 --> 00:04:07,120 Again doing a little bit of 60 structuring here and then I'll call this Doug prop's thought logged in 62 00:04:07,120 --> 00:04:11,690 user with the email in the password. 63 00:04:11,690 --> 00:04:17,410 Remember that we set up the method signature to log in user to expect an object with the email and password 64 00:04:17,410 --> 00:04:18,400 properties. 65 00:04:18,400 --> 00:04:23,530 So we need to make sure we pass in an object that has both email and password properties on it. 66 00:04:23,530 --> 00:04:23,990 All right. 67 00:04:24,100 --> 00:04:27,770 Finally finally at long last I think we're ready for a test here. 68 00:04:27,820 --> 00:04:29,880 I think we're ready for a test. 69 00:04:30,460 --> 00:04:34,060 So let's open up our Riak native debugger. 70 00:04:34,060 --> 00:04:35,420 Here it is. 71 00:04:35,430 --> 00:04:37,000 I've already got mine open here. 72 00:04:37,030 --> 00:04:43,630 Member If you are on iOS you can open yours up by pressing command D and then hit start remote. 73 00:04:43,810 --> 00:04:49,240 J.S. debugging if you are an android on Windows you can hit command or excuse me control in and then 74 00:04:49,240 --> 00:04:50,370 hit the same button. 75 00:04:50,790 --> 00:04:51,110 OK. 76 00:04:51,130 --> 00:04:52,350 So I think we're about ready here. 77 00:04:52,630 --> 00:04:56,280 I need to do a refresh to make sure we get all the legacy code. 78 00:04:56,290 --> 00:05:00,700 You can see that we need to immediately get some console logs of actions that are flowing into that 79 00:05:00,730 --> 00:05:02,050 author douceur. 80 00:05:02,050 --> 00:05:03,190 Now here's the fun part. 81 00:05:03,310 --> 00:05:08,240 I'm going to select the email field and I'll hit test at test dot com. 82 00:05:08,560 --> 00:05:13,630 And very interestingly in the background you can see that I'm getting in the action in the reducer for 83 00:05:13,630 --> 00:05:16,250 every character that I add to email field. 84 00:05:16,240 --> 00:05:19,520 So that's the email changed action in action. 85 00:05:19,560 --> 00:05:25,410 Gazi and say no at enter and password and there is all my password changed actions. 86 00:05:25,480 --> 00:05:30,330 And then finally log in and hot. 87 00:05:30,430 --> 00:05:38,420 After a brief pause I see an action of type log in user success with a payload of W and half way it's 88 00:05:38,680 --> 00:05:40,940 beyond this and look at w.. 89 00:05:41,110 --> 00:05:43,450 I know there's a lot of really weird properties on here. 90 00:05:43,450 --> 00:05:44,200 Don't sweat it. 91 00:05:44,200 --> 00:05:51,160 What really matters is that we have an email of test at test dot com and a new ID which is the ID for 92 00:05:51,160 --> 00:05:52,670 this very particular user. 93 00:05:52,840 --> 00:05:54,370 So this is the user model right here. 94 00:05:54,370 --> 00:05:58,320 This is the thing that describes the currently logged in user. 95 00:05:58,360 --> 00:05:58,990 So that's it. 96 00:05:58,990 --> 00:06:00,700 Everything works. 97 00:06:00,780 --> 00:06:06,580 Now to take a brief pause and I want to say yes I know that everything we just went through especially 98 00:06:06,580 --> 00:06:09,250 wiring up the action creator is really tedious. 99 00:06:09,280 --> 00:06:13,890 Like how are you going to ever remember every last step in here. 100 00:06:13,900 --> 00:06:20,400 You know worry I guarantee you you get used to all this little you know tiny little details like dispatch 101 00:06:20,410 --> 00:06:22,200 and types and payloads. 102 00:06:22,210 --> 00:06:24,600 You really get used to it over time. 103 00:06:24,730 --> 00:06:28,990 So just the more practice you get the more you're going to internalize all this stuff and you're going 104 00:06:28,990 --> 00:06:31,860 to do fantastic. 105 00:06:31,870 --> 00:06:36,830 So let's do one last quick review of how this works because redux thunk is a little bit of a brain bender. 106 00:06:37,150 --> 00:06:43,450 By using redux thunk we expand the range of values that we can return from an action of creator so we 107 00:06:43,450 --> 00:06:46,790 can now return a function from an action Creator. 108 00:06:47,020 --> 00:06:54,130 This function as we see it right here will automatically be called for us by redux thunk and the first 109 00:06:54,130 --> 00:06:56,780 argument to it is going to be the dispatch method. 110 00:06:56,800 --> 00:07:03,490 So dispatch right here is a method and allows us to manually send an action off to all of the reducers 111 00:07:03,490 --> 00:07:10,460 in our application by using this we can do what ever async action we want in. 112 00:07:10,480 --> 00:07:15,230 Only after that async action like say you know logging use user in is complete. 113 00:07:15,340 --> 00:07:21,830 We can then manually dispatch an action with whatever whatever action we can possibly imagine. 114 00:07:21,850 --> 00:07:23,830 So this really is a backdoor into redux. 115 00:07:23,830 --> 00:07:30,420 It gives us a ton of control and power over what is going on inside of our application. 116 00:07:30,850 --> 00:07:31,360 All right. 117 00:07:31,480 --> 00:07:33,280 So this is great good progress. 118 00:07:33,280 --> 00:07:35,370 We're definitely signing our users in now. 119 00:07:35,530 --> 00:07:39,700 But now we still need to make sure that we're doing all the extra stuff in our application like you 120 00:07:39,700 --> 00:07:41,140 know showing a spinner here. 121 00:07:41,320 --> 00:07:42,800 We need to be able to stop it. 122 00:07:42,820 --> 00:07:45,480 We need to create new accounts for users who don't have one. 123 00:07:45,560 --> 00:07:47,090 Cetera all that good stuff. 124 00:07:47,350 --> 00:07:49,660 Let's start working on that in the next section.