1 00:00:00,740 --> 00:00:04,790 In the last video we started talking about the redux library and this video we're now going to start 2 00:00:04,790 --> 00:00:07,700 to discuss exactly how we're going to cover this library. 3 00:00:07,700 --> 00:00:11,630 So a couple of different steps right here in this video in the next couple. 4 00:00:11,660 --> 00:00:17,040 I can tell you a little story or a quick analogy to help you understand how redux works internally. 5 00:00:17,120 --> 00:00:22,540 After that we're going to write a little bit of code pin or code into Code been with redux by itself. 6 00:00:22,550 --> 00:00:26,470 So no re-act involved whatsoever in these first two steps right here. 7 00:00:26,480 --> 00:00:28,490 That we're going to go through it in the next couple of videos. 8 00:00:28,490 --> 00:00:34,430 You're going to get a good idea of what redux does by itself in isolation without re-act involved at 9 00:00:34,430 --> 00:00:35,090 all. 10 00:00:35,390 --> 00:00:40,400 After we understand how redux works by itself then we'll start to work on a re-act up and understand 11 00:00:40,400 --> 00:00:44,930 how to mix react in redux together in some appropriate fashion. 12 00:00:44,930 --> 00:00:45,190 All right. 13 00:00:45,200 --> 00:00:51,260 So in this video we're going to start off with an analogy and this analogy is going to be a little complicated 14 00:00:51,500 --> 00:00:57,230 but it's really going to help you understand exactly how redux works internally by giving you some real 15 00:00:57,230 --> 00:01:00,510 world concepts to relate all this stuff to. 16 00:01:00,510 --> 00:01:05,670 All right so first thing I want to tell you about is the redux cycle. 17 00:01:05,670 --> 00:01:10,270 You might have seen a diagram that looks like this right here or even some of these pieces of terminology. 18 00:01:10,290 --> 00:01:16,140 If you've ever looked at the redux documentation or read a blog post or another tutorial about redux. 19 00:01:16,140 --> 00:01:21,660 These are a bunch of very fancy turns you see inside of here that describe what happens internally inside 20 00:01:21,660 --> 00:01:22,730 of redux. 21 00:01:22,770 --> 00:01:27,180 If I just give you a description of what happens during each of these steps it can be kind of hard to 22 00:01:27,180 --> 00:01:29,820 really understand the purpose of each step. 23 00:01:29,880 --> 00:01:35,070 And so that's why I'm going to give you an analogy this analogy is going to help you understand exactly 24 00:01:35,310 --> 00:01:40,460 what an actual creator is what an action is what the dispatches reducers instate and so on. 25 00:01:40,500 --> 00:01:43,210 It's going to help you understand every step along the way. 26 00:01:43,440 --> 00:01:49,080 So as we go through this little story it's going to seem a little bit complex at times but remember 27 00:01:49,110 --> 00:01:54,600 I'm telling you this story to give you a real world grounding on the purpose of each of these steps. 28 00:01:54,600 --> 00:01:56,760 So let me tell you my story. 29 00:01:57,100 --> 00:02:01,920 We are going to imagine that you and I are going to build an insurance company. 30 00:02:01,950 --> 00:02:06,570 Now if you're not familiar with a insurance company and its purpose essentially a insurance company 31 00:02:06,690 --> 00:02:12,570 offers people common people like just like you and me to pay some monthly amount of money and then if 32 00:02:12,570 --> 00:02:19,020 something bad happens to you or me like we crash a car or we break a bone or we die you know whatever 33 00:02:19,020 --> 00:02:25,050 bad thing might happen the insurance company will pay out some lump sum or essentially just some amount 34 00:02:25,050 --> 00:02:26,500 of money. 35 00:02:26,500 --> 00:02:31,960 Now an insurance company has two important terms you need to understand to make this story makes sense. 36 00:02:31,980 --> 00:02:34,860 These two terms right here are insurance related terms. 37 00:02:34,860 --> 00:02:37,830 They are not redux ones so don't worry about memorize them. 38 00:02:37,980 --> 00:02:40,570 Memorize them for the purpose of the redux library. 39 00:02:40,570 --> 00:02:42,350 First off we have a policy. 40 00:02:42,480 --> 00:02:47,620 A customer like you or me will purchase or hold a policy. 41 00:02:47,730 --> 00:02:53,100 A policy is essentially a contract between a customer and an insurance company that says if something 42 00:02:53,100 --> 00:02:58,740 bad happens to the customer the insurance company will pay out some amount of money. 43 00:02:58,740 --> 00:03:04,500 Now the other important term here to understand an insurance company is a claim a claim is something 44 00:03:04,500 --> 00:03:08,660 that a customer files or reports to an insurance company. 45 00:03:08,760 --> 00:03:12,740 They do so to essentially get some money from the insurance company. 46 00:03:12,750 --> 00:03:18,510 So if I have a policy with a company and I get into an accident I will file a claim with the company 47 00:03:18,510 --> 00:03:20,780 to say hey I was just in an accident. 48 00:03:20,850 --> 00:03:25,350 I think this should be covered by my policy and I think you should pay me some amount of money. 49 00:03:25,350 --> 00:03:25,620 All right. 50 00:03:25,650 --> 00:03:27,070 Now that we understand this. 51 00:03:27,210 --> 00:03:29,870 Let's go through a quick scenario here. 52 00:03:30,180 --> 00:03:34,650 So this is a diagram of our insurance company that we are trying to build. 53 00:03:34,680 --> 00:03:36,790 This is our headquarters right here. 54 00:03:36,840 --> 00:03:40,350 Our headquarters has a couple of different departments inside of it. 55 00:03:40,350 --> 00:03:42,480 We have a claims history department. 56 00:03:42,540 --> 00:03:46,590 We have a policies department and end and counting department as well. 57 00:03:46,590 --> 00:03:49,860 And I'll tell you about the purpose of each of those in just a second. 58 00:03:49,860 --> 00:03:55,710 I want to walk through what might happen if some new customer comes to our company to sign up for a 59 00:03:55,710 --> 00:03:57,000 new policy. 60 00:03:57,040 --> 00:04:03,250 Remember a policy is a contract that's going to cover this customer so we're going to start off over 61 00:04:03,250 --> 00:04:03,670 here. 62 00:04:03,670 --> 00:04:07,150 We're going to walk through this entire diagram from left to right. 63 00:04:07,180 --> 00:04:08,650 We have a customer right here. 64 00:04:08,680 --> 00:04:10,570 They want to get a new policy. 65 00:04:10,720 --> 00:04:15,460 So they are going to fill out some form that essentially says I want to get a policy so that if I get 66 00:04:15,460 --> 00:04:20,920 into a car crash I can get some paid some amount of money to cover expenses in order to sign up for 67 00:04:20,920 --> 00:04:21,740 a policy. 68 00:04:21,740 --> 00:04:27,130 They are going to fill out a form and then they will come to our insurance company headquarters. 69 00:04:27,430 --> 00:04:32,050 Now the customer is not just going to go up to one of these departments and hand the form off. 70 00:04:32,140 --> 00:04:38,290 Instead we're going to say that our customer has to take this form and hand it off to some front office 71 00:04:38,290 --> 00:04:43,900 or front counter right here that we will refer to as the form receiver. 72 00:04:43,890 --> 00:04:50,350 This former CVS right here is a person who is going to take that form and then make a copy of it with 73 00:04:50,350 --> 00:04:52,480 say a photocopier or a copy machine. 74 00:04:52,480 --> 00:04:57,730 They'll make some copies of the form and then they're going to hand off copies of the form to each of 75 00:04:57,730 --> 00:05:01,100 the different departments that exist inside of our company. 76 00:05:01,240 --> 00:05:06,490 So the claims history department gets one copy the form the policies department gets another copy in 77 00:05:06,520 --> 00:05:09,220 the accounting department gets another copy. 78 00:05:09,220 --> 00:05:11,080 Now remember this form right here. 79 00:05:11,110 --> 00:05:13,870 The purpose of it was to sign up for a new policy. 80 00:05:14,110 --> 00:05:19,300 So chances are that the claims history department who's probably going to maintain a list of claims 81 00:05:19,610 --> 00:05:21,560 it probably doesn't care about this form. 82 00:05:21,580 --> 00:05:24,880 Nonetheless they will be given a copy of it anyways. 83 00:05:25,270 --> 00:05:29,620 Now let's talk about the purpose of each of these different departments that claims history department 84 00:05:29,740 --> 00:05:34,690 is going to store a list of every claim that has been ever made out this company. 85 00:05:34,760 --> 00:05:39,730 And I remember a claim is essentially a request to get some amount of money and each time that a customer 86 00:05:39,730 --> 00:05:42,020 has something bad happened to them. 87 00:05:42,030 --> 00:05:45,030 Next up is the policies Department. 88 00:05:45,030 --> 00:05:50,700 This department is in charge of storing a list of everyone who has a policy an active policy with our 89 00:05:50,700 --> 00:05:52,410 insurance company. 90 00:05:52,410 --> 00:05:56,900 And then finally the accounting department is going to store a big bag of cash. 91 00:05:57,090 --> 00:06:02,050 And any time that someone follows file has me anytime someone files a claim and tries to get some money. 92 00:06:02,160 --> 00:06:07,100 Our accounting department is going to be responsible for paying some money out to that person. 93 00:06:07,140 --> 00:06:13,440 So if we think about a customer over here trying to sign up for a new policy this form right here probably 94 00:06:13,440 --> 00:06:16,140 says something like Hey I want to sign up for a policy. 95 00:06:16,290 --> 00:06:21,240 And chances are that the only department here that really cares about that will be the policies department. 96 00:06:21,240 --> 00:06:26,390 Like I said the claims history department probably doesn't care that you want to sign up for a new policy. 97 00:06:26,400 --> 00:06:29,140 They just record a list of claims. 98 00:06:29,160 --> 00:06:29,480 All right. 99 00:06:29,470 --> 00:06:32,130 So that's kind of step one of this little story here. 100 00:06:32,130 --> 00:06:34,290 All right so let's kind of lay some foundation. 101 00:06:34,380 --> 00:06:38,020 It tells you how a customer interacts with our insurance company member. 102 00:06:38,070 --> 00:06:42,810 They take that form and hand it off to the former Stever the former receiver makes copies of the form 103 00:06:42,990 --> 00:06:45,090 and hands it off to each different department. 104 00:06:45,150 --> 00:06:47,970 And we know what each different department now does. 105 00:06:48,210 --> 00:06:50,300 So there's a couple of more steps to this story. 106 00:06:50,340 --> 00:06:51,640 So let's take a pause right here. 107 00:06:51,690 --> 00:06:56,040 When we come back in the next section I'm going to lay out another little scenario here related to our 108 00:06:56,040 --> 00:06:57,070 insurance company. 109 00:06:57,150 --> 00:07:01,980 And then remember we're going to eventually relate it back to these different pieces of terminology 110 00:07:02,010 --> 00:07:02,670 over here. 111 00:07:02,670 --> 00:07:05,060 So quick pause and I'll see you in just a minute.