1 00:00:00,880 --> 00:00:06,270 In the last section we spoke about how our analogy muddled the redux cycle step by step. 2 00:00:06,350 --> 00:00:08,680 Now we still don't really know why this thing is this cycle. 3 00:00:08,680 --> 00:00:13,260 And even though you might now have some idea like a rough idea of what an action creator is or when 4 00:00:13,270 --> 00:00:17,660 action is we still don't really have a lot of context on what is going on in the redux world. 5 00:00:17,770 --> 00:00:22,690 So in this video we're going to start writing out some code to model our entire insurance company step 6 00:00:22,690 --> 00:00:25,930 by step using redux to write this code. 7 00:00:25,930 --> 00:00:29,440 We're going to use that same tool that we use much earlier called Code pen. 8 00:00:29,470 --> 00:00:35,200 So in a new browser tab I'm going to navigate to code when I go on then going to find the create button 9 00:00:35,260 --> 00:00:42,580 on the top right hand side and click on new pen once here we need to add redux as a dependency to our 10 00:00:42,580 --> 00:00:43,420 project. 11 00:00:43,420 --> 00:00:45,440 So I going to click on the Settings button. 12 00:00:45,460 --> 00:00:49,780 I'll go to the javascript tab and I'll search for redux and I'll select it. 13 00:00:50,560 --> 00:00:53,970 Then finally I'm going to click on Save and close. 14 00:00:54,000 --> 00:00:59,280 Now if you want to get your editors here on the left hand side as opposed to the default top position 15 00:00:59,520 --> 00:01:04,480 you can click on change view and then you can select your editor layout. 16 00:01:04,680 --> 00:01:08,550 In addition to putting my editor layout with the editors on the left hand side I'm also going to change 17 00:01:08,640 --> 00:01:11,070 my view to presentation mode. 18 00:01:11,070 --> 00:01:15,420 Now you probably don't see these options right here unless you are a subscriber to Copen which means 19 00:01:15,420 --> 00:01:16,620 you're paying them money. 20 00:01:16,620 --> 00:01:19,340 I am a subscriber which is why I see these options. 21 00:01:19,350 --> 00:01:20,830 Again you probably don't. 22 00:01:20,870 --> 00:01:22,850 I'm going to look over to presentation mode. 23 00:01:22,890 --> 00:01:24,800 All it does is hide the top panel. 24 00:01:24,810 --> 00:01:28,070 Just so you can see what I'm doing a little bit more easily. 25 00:01:28,220 --> 00:01:32,710 Now the next day I'm going to do is collapse down to just the javascript panel here. 26 00:01:32,750 --> 00:01:36,140 We're not going to write any H.T. mail or any success. 27 00:01:36,140 --> 00:01:41,810 In addition we're not going to actually preview any content with this default preview tab over here. 28 00:01:41,840 --> 00:01:44,570 Instead we're going to be consul logging a lot of data. 29 00:01:44,640 --> 00:01:50,190 So I'm going to open up my browser's console so that we can see anything that we can so log. 30 00:01:50,600 --> 00:01:54,510 And then finally inside the javascript panel I'm going to write out console. 31 00:01:54,560 --> 00:02:00,490 Clear like so the cons thought clear line right here is going to automatically clear everything inside 32 00:02:00,500 --> 00:02:01,150 of our console. 33 00:02:01,150 --> 00:02:06,380 Any time that our code is read ran and that's just to make sure that any time we see a console log we 34 00:02:06,380 --> 00:02:09,820 only will see the latest version of our program. 35 00:02:10,270 --> 00:02:10,530 OK. 36 00:02:10,580 --> 00:02:15,650 So that's all the setup now ready to actually start writing some code to model our insurance company. 37 00:02:15,740 --> 00:02:19,880 We're going to first begin by creating an action creator and an action. 38 00:02:19,940 --> 00:02:25,880 Remember in-action creator is a function that is going to return a plain javascript object which referred 39 00:02:25,900 --> 00:02:32,120 to as the action the action is just like our form and action it's going to have a type that describes 40 00:02:32,120 --> 00:02:38,030 the purpose of the form and a payload that provides some context on exactly what this form is doing. 41 00:02:39,400 --> 00:02:44,700 So back inside of my code editor over here I first put a comment that says that we're about to write 42 00:02:44,700 --> 00:02:52,540 some code to simulate people dropping off a form and where again we refer to these as action creators. 43 00:02:52,890 --> 00:02:57,990 We're going to first create an action creator that's going to simulate someone dropping off a create 44 00:02:57,990 --> 00:02:59,260 policy form. 45 00:02:59,370 --> 00:03:04,350 We're going to ultimately create one separate action creator for each different type of action that 46 00:03:04,350 --> 00:03:05,850 we have inside of our app. 47 00:03:05,910 --> 00:03:10,830 So we're going to have one action creator that's going return in action with type great policy or make 48 00:03:10,830 --> 00:03:15,620 a second action creator for create claim and a third action creator for delete policy. 49 00:03:17,320 --> 00:03:25,550 So I'm going to make a javascript function called create policy. 50 00:03:25,570 --> 00:03:30,540 This is going to return an object and this object right here is an action. 51 00:03:30,580 --> 00:03:34,660 Remember we refer to this as a form in our analogy. 52 00:03:37,460 --> 00:03:40,680 The action is going to have two properties the type and the payload. 53 00:03:40,820 --> 00:03:48,400 So I'm going to put in a type and I'm going to assign this a string of create a policy by convention. 54 00:03:48,430 --> 00:03:54,550 Whenever we assign a type we usually use all uppercase characters and underscores instead of spaces. 55 00:03:54,730 --> 00:03:59,800 And so usually by convention I don't have to do this but by convention instead of writing create a policy 56 00:03:59,800 --> 00:04:04,260 I would write out a type of create policy. 57 00:04:04,330 --> 00:04:11,140 Like so then I'll put a comma at the end of the line and then after that I'm going to specify my payload. 58 00:04:11,140 --> 00:04:16,360 Remember my payload is going to have some information that provides context about this form or this 59 00:04:16,360 --> 00:04:17,800 action that we are Smiddy. 60 00:04:18,010 --> 00:04:23,800 So in the case of creating a policy we probably need to provide a name and some amount of cash that 61 00:04:23,800 --> 00:04:24,330 is required. 62 00:04:24,340 --> 00:04:32,690 Any time that a user first signs up for a policy so for my payload I'll give it a name of Alex and an 63 00:04:32,780 --> 00:04:34,220 amount. 64 00:04:34,370 --> 00:04:38,910 This is like an amount of cash of 20 which represents like $20. 65 00:04:39,440 --> 00:04:39,670 OK. 66 00:04:39,680 --> 00:04:44,640 So what you see right here is a completed action creator that returns in action. 67 00:04:44,660 --> 00:04:49,250 The only problem with this action Creator is it stands right now is that it only works to create a form 68 00:04:49,880 --> 00:04:54,720 that will only work for someone called Alex that is trying to commit $20. 69 00:04:54,740 --> 00:04:59,630 Now chances are we're not going to always have a customer called Alex who's always trying to get $20. 70 00:04:59,750 --> 00:05:05,630 So usually to customize the form rather than hard coding these pallet properties we will instead pass 71 00:05:05,630 --> 00:05:08,430 them in as arguments to the action creator itself. 72 00:05:08,720 --> 00:05:15,370 And so I might pass in a name and an amount and then I will refer to those inside of my payload. 73 00:05:15,430 --> 00:05:18,960 So to say name is name and amount is amount. 74 00:05:18,980 --> 00:05:23,810 Now of course if you want to you can shorten this up right here with a little bit of yes 20:15 syntax. 75 00:05:23,810 --> 00:05:29,720 It could go to just being name and amount if you wanted to use as 2015. 76 00:05:29,720 --> 00:05:32,840 But I'm going to leave it very simple and straightforward in the long form. 77 00:05:32,870 --> 00:05:35,100 Like so OK. 78 00:05:35,120 --> 00:05:36,870 That's action creator number one. 79 00:05:37,160 --> 00:05:44,520 So now we need to create a completely separate action creator to model creating a claim and deleting 80 00:05:44,550 --> 00:05:45,670 a policy. 81 00:05:46,110 --> 00:05:48,750 So next up we'll do deleting a policy. 82 00:05:49,430 --> 00:05:55,630 So I'll say Konst delete policy. 83 00:05:55,670 --> 00:06:00,740 So this is going to be a second action Creator that is going to return its own plain javascript object 84 00:06:00,950 --> 00:06:02,740 that has a type. 85 00:06:02,820 --> 00:06:11,400 In this case will make R-Type delete policy sowles say delete policy like so and then for the payload 86 00:06:11,850 --> 00:06:17,300 I'm going to again give it an object that has a name I could hard code the name right here. 87 00:06:17,290 --> 00:06:19,830 Something like Alex or Sam. 88 00:06:19,830 --> 00:06:22,430 But again chances are not everyone is going to have the same name. 89 00:06:22,440 --> 00:06:27,130 So instead I'll allow that name to be customized as a argument. 90 00:06:27,240 --> 00:06:32,350 And now I'll refer to the name inside of that payload Lexow. 91 00:06:32,350 --> 00:06:32,690 All right. 92 00:06:32,690 --> 00:06:35,750 So compare these to action critters right here. 93 00:06:35,830 --> 00:06:38,530 You'll notice that they look just about identical. 94 00:06:38,530 --> 00:06:45,760 They both return a plain javascript object that has a type and a payload just about every single action 95 00:06:45,760 --> 00:06:51,760 creator that you are ever going to write inside of a redux application is going to look almost identical 96 00:06:51,760 --> 00:06:53,190 to what you see right here. 97 00:06:53,200 --> 00:06:57,850 There are going to be freakishly small little variations but at the end of the day it's almost going 98 00:06:57,850 --> 00:07:00,540 to look exactly like what you see here. 99 00:07:00,850 --> 00:07:06,540 So all of the times the code that we are writing with redux is not like syntactically really complicated. 100 00:07:06,550 --> 00:07:12,070 Instead the complicated stuff with three ducks comes from having to understand every one of these different 101 00:07:12,070 --> 00:07:15,770 pieces of terminology and there are different purposes. 102 00:07:16,570 --> 00:07:21,130 All right before we get ahead of ourselves there's one more action creator we need to make. 103 00:07:21,160 --> 00:07:25,080 So the last action creator is to simulate someone creating a claim. 104 00:07:25,090 --> 00:07:27,800 So let's use one really quickly because I think you get the idea now. 105 00:07:28,040 --> 00:07:33,760 So I'm going to create a final action creator down here called create claim and I'm going to pass in 106 00:07:33,760 --> 00:07:34,760 a name here. 107 00:07:34,870 --> 00:07:38,860 And how about an amount of money to collect. 108 00:07:38,860 --> 00:07:40,990 Because remember that is the purpose of a claim. 109 00:07:41,010 --> 00:07:48,830 It is a customer trying to get some money from our company and I'm going to return my action that has 110 00:07:48,830 --> 00:08:04,910 a type of creates claim and a payload with a name of name and amount of money to collect of amount amount 111 00:08:05,030 --> 00:08:05,720 of. 112 00:08:05,890 --> 00:08:08,800 Oh come on money to collect. 113 00:08:10,240 --> 00:08:11,150 Come on. 114 00:08:11,170 --> 00:08:12,240 There we go. 115 00:08:12,280 --> 00:08:12,520 OK. 116 00:08:12,550 --> 00:08:12,910 That's it. 117 00:08:12,910 --> 00:08:15,250 That's all three of our different action creators. 118 00:08:15,250 --> 00:08:20,710 Every single action creator returns a plain javascript object which refer to as an action and that action 119 00:08:20,710 --> 00:08:22,890 has a type and a payload. 120 00:08:22,900 --> 00:08:28,120 So we've now modeled out these first two steps of a person dropping off a form. 121 00:08:28,180 --> 00:08:29,570 And the actual form itself. 122 00:08:29,860 --> 00:08:30,930 So take another quick pause. 123 00:08:30,940 --> 00:08:35,110 When we come back the next section we're going to start to write out some code to model the remaining 124 00:08:35,110 --> 00:08:36,730 steps inside of this thing. 125 00:08:36,730 --> 00:08:40,720 Don't worry a lot of the code we have to go here is actually can go a lot faster than what we just wrote 126 00:08:40,780 --> 00:08:42,100 so it won't be that bad. 127 00:08:42,100 --> 00:08:44,160 All right so a quick puzzle I'll see you in just a minute.