1 00:00:01,140 --> 00:00:04,659 ‫Moving on, let's now create some more action creators 2 00:00:04,659 --> 00:00:08,703 ‫and a reducer about the customer state. 3 00:00:10,320 --> 00:00:13,760 ‫And this time let's actually start with the initial state 4 00:00:13,760 --> 00:00:17,370 ‫and with the action creators so that we actually 5 00:00:17,370 --> 00:00:21,040 ‫know what we later have to write in our reducer. 6 00:00:21,040 --> 00:00:25,233 ‫So let's come up here and do that, close. 7 00:00:26,958 --> 00:00:31,958 ‫So let's call this one, initial state customer. 8 00:00:34,500 --> 00:00:36,540 ‫And then let's also rename this one 9 00:00:36,540 --> 00:00:39,516 ‫to initial state account. 10 00:00:39,516 --> 00:00:44,516 ‫And of course then the same thing right here. 11 00:00:45,176 --> 00:00:46,740 ‫All right, 12 00:00:46,740 --> 00:00:51,740 ‫so our customer should have a full name, which starts mt, 13 00:00:53,396 --> 00:00:58,396 ‫a national ID number, also starting empty of course 14 00:00:59,532 --> 00:01:04,532 ‫and a created at property also starting empty. 15 00:01:05,337 --> 00:01:10,337 ‫Alright, and then let's create our action creators. 16 00:01:13,214 --> 00:01:17,310 ‫And later on we will of course separate this all 17 00:01:17,310 --> 00:01:20,640 ‫into different files because it's already getting a bit 18 00:01:20,640 --> 00:01:24,111 ‫out of hand, but nevermind for now. 19 00:01:24,111 --> 00:01:29,111 ‫So the first action creator, let's call it create customer. 20 00:01:32,730 --> 00:01:35,040 ‫And for this we will probably have to pass 21 00:01:35,040 --> 00:01:39,755 ‫in the customer's full name and the national id. 22 00:01:39,755 --> 00:01:43,980 ‫So the time of creation, we don't need to pass in 23 00:01:43,980 --> 00:01:47,670 ‫because we can simply create that logic in here. 24 00:01:47,670 --> 00:01:52,670 ‫So as we built the action, so as always, 25 00:01:53,670 --> 00:01:56,130 ‫let's return the action. 26 00:01:56,130 --> 00:01:59,940 ‫And here the type, again, let's start with the domain. 27 00:01:59,940 --> 00:02:03,570 ‫So earlier we had account slash something. 28 00:02:03,570 --> 00:02:08,430 ‫And so now let's do customer slash and for the sake 29 00:02:08,430 --> 00:02:12,750 ‫of convention, let's actually name this event here. 30 00:02:12,750 --> 00:02:17,551 ‫Exactly the same thing as the action creator function. 31 00:02:17,551 --> 00:02:21,420 ‫So basically here I will now place exactly the 32 00:02:21,420 --> 00:02:23,089 ‫same thing as here. 33 00:02:23,089 --> 00:02:26,280 ‫So this is also what we did here. 34 00:02:26,280 --> 00:02:29,340 ‫So the deposit function creates the account 35 00:02:29,340 --> 00:02:31,390 ‫slash deposit withdraw. 36 00:02:31,390 --> 00:02:33,483 ‫And here the same thing. 37 00:02:35,130 --> 00:02:40,080 ‫Okay? And now here the payload will again 38 00:02:40,080 --> 00:02:41,880 ‫be a bit more complex. 39 00:02:41,880 --> 00:02:44,043 ‫So we will pass in the full name, 40 00:02:46,380 --> 00:02:47,950 ‫the national id 41 00:02:49,228 --> 00:02:50,490 ‫which we both received here 42 00:02:50,490 --> 00:02:54,722 ‫and then also let's pass in the created ad. 43 00:02:54,722 --> 00:02:58,920 ‫Now, we could also do this inside the reducer 44 00:02:58,920 --> 00:03:01,620 ‫so computing the current date 45 00:03:01,620 --> 00:03:04,440 ‫but that would actually be a side effect. 46 00:03:04,440 --> 00:03:06,480 ‫And so we shouldn't have side effects 47 00:03:06,480 --> 00:03:08,160 ‫in the reducer function. 48 00:03:08,160 --> 00:03:10,028 ‫And so let's do that here. 49 00:03:10,028 --> 00:03:13,408 ‫Now usually we should in fact keep as much 50 00:03:13,408 --> 00:03:16,826 ‫business logic as possible inside the reducer. 51 00:03:16,826 --> 00:03:20,927 ‫But again, since this is actually a side effect, 52 00:03:20,927 --> 00:03:24,062 ‫this does not belong in the reducer. 53 00:03:24,062 --> 00:03:29,062 ‫Okay, so here we simply return the current date 54 00:03:29,288 --> 00:03:31,590 ‫nicely formatted. 55 00:03:31,590 --> 00:03:33,003 ‫And that's actually it. 56 00:03:35,460 --> 00:03:40,460 ‫So let's create another one for updating the name. 57 00:03:40,650 --> 00:03:43,473 ‫So update name. 58 00:03:44,430 --> 00:03:47,643 ‫And so here it's again passed in the full name. 59 00:03:48,624 --> 00:03:52,664 ‫And then return the type of 60 00:03:52,664 --> 00:03:57,664 ‫account slash update name. 61 00:03:59,182 --> 00:04:04,182 ‫And here the payload only some payload 62 00:04:04,378 --> 00:04:07,559 ‫all it needs is the full name. 63 00:04:07,559 --> 00:04:12,257 ‫Alright? And so now we know the two events that 64 00:04:12,257 --> 00:04:15,384 ‫can happen and the shape of the data. 65 00:04:15,384 --> 00:04:16,920 ‫And so based on that 66 00:04:16,920 --> 00:04:20,643 ‫we can now easily create our reducer function. 67 00:04:21,653 --> 00:04:24,655 ‫So first of all let's rename this one here 68 00:04:24,655 --> 00:04:27,495 ‫to account reducer. 69 00:04:27,495 --> 00:04:32,495 ‫And then of course we need to update that here. 70 00:04:32,510 --> 00:04:37,510 ‫And yeah, so down here let's then create 71 00:04:37,530 --> 00:04:41,823 ‫the customer reducer. 72 00:04:46,321 --> 00:04:51,321 ‫So again, this takes in the state and as a default 73 00:04:52,739 --> 00:04:56,860 ‫we want the initial state customer 74 00:04:58,300 --> 00:05:01,533 ‫and then also the dispatched action. 75 00:05:05,310 --> 00:05:09,183 ‫So here's switching over the type as always. 76 00:05:11,970 --> 00:05:16,473 ‫So customer and then it was I believe create customer. 77 00:05:18,460 --> 00:05:21,303 ‫And here we need that colon at the end. 78 00:05:22,230 --> 00:05:26,338 ‫And so here, let's return the current state 79 00:05:26,338 --> 00:05:30,657 ‫and then let's update everything. 80 00:05:30,657 --> 00:05:35,657 ‫So the full name will become the action.payload.full name. 81 00:05:40,457 --> 00:05:45,457 ‫The national ID will become also action.payload.nationalID. 82 00:05:49,000 --> 00:05:53,710 ‫And the same thing for created at 83 00:05:58,179 --> 00:06:03,179 ‫all, right? 84 00:06:04,410 --> 00:06:08,160 ‫And here we are again, destructuring, the current state 85 00:06:08,160 --> 00:06:11,640 ‫even though we are then overriding all the three 86 00:06:11,640 --> 00:06:13,620 ‫properties that are in there. 87 00:06:13,620 --> 00:06:17,220 ‫So the reason for that is again, that this way 88 00:06:17,220 --> 00:06:20,670 ‫we will not run into any problem if for example 89 00:06:20,670 --> 00:06:23,000 ‫later we add another property 90 00:06:23,000 --> 00:06:27,818 ‫like a status or something like that. 91 00:06:27,818 --> 00:06:32,818 ‫Alright, let's add our default as well 92 00:06:33,939 --> 00:06:38,337 ‫which will be to just return the state. 93 00:06:38,337 --> 00:06:43,337 ‫And then we also have customer slash update name. 94 00:06:49,650 --> 00:06:54,000 ‫And so here, the only thing that's gonna change is 95 00:06:54,000 --> 00:06:58,480 ‫that the full name will become action dot payload. 96 00:07:02,070 --> 00:07:03,390 ‫All right? 97 00:07:03,390 --> 00:07:07,230 ‫And now we need to use this reducer somehow. 98 00:07:07,230 --> 00:07:12,230 ‫So we also need to place debt reducer inside or store. 99 00:07:12,510 --> 00:07:14,970 ‫So remember how we learned earlier that 100 00:07:14,970 --> 00:07:18,949 ‫in Redux we don't dispatch actions directly to the reducer 101 00:07:18,949 --> 00:07:21,720 ‫but really to the store. 102 00:07:21,720 --> 00:07:24,210 ‫So that's exactly what we did right here. 103 00:07:24,210 --> 00:07:26,370 ‫So store dot dispatch. 104 00:07:26,370 --> 00:07:29,190 ‫And that's going to stay the same now as we have 105 00:07:29,190 --> 00:07:33,066 ‫a new reducer and basically some more state. 106 00:07:33,066 --> 00:07:36,771 ‫Now we cannot simply pass that other reducer in here 107 00:07:36,771 --> 00:07:40,890 ‫but instead what we need to do is to combine 108 00:07:40,890 --> 00:07:43,612 ‫all the reducers that we have in order to create 109 00:07:43,612 --> 00:07:46,710 ‫one so-called root reducer. 110 00:07:46,710 --> 00:07:49,620 ‫Because this reducer that creates store he 111 00:07:49,620 --> 00:07:53,122 ‫receives is always considered the root reducer. 112 00:07:53,122 --> 00:07:55,752 ‫So right now, that's just this one. 113 00:07:55,752 --> 00:07:59,610 ‫But again, usually what we always do is to combine 114 00:07:59,610 --> 00:08:01,383 ‫all the reducers that we have. 115 00:08:02,370 --> 00:08:06,474 ‫So let's say that our root reducer is, 116 00:08:06,474 --> 00:08:11,474 ‫so now we need to take in another function from Redux. 117 00:08:13,098 --> 00:08:18,098 ‫So this one right here, make sure it is imported. 118 00:08:18,717 --> 00:08:22,440 ‫And then here we specify an object, and then 119 00:08:22,440 --> 00:08:26,338 ‫we need to give each of the reducers a meaningful name. 120 00:08:26,338 --> 00:08:31,174 ‫So the one that makes sense for the account is just account. 121 00:08:31,174 --> 00:08:35,280 ‫And so for this one, we specify account reducer 122 00:08:35,280 --> 00:08:39,780 ‫and then let's say for the customer, 123 00:08:39,780 --> 00:08:43,140 ‫we of course use the customer reducer. 124 00:08:43,140 --> 00:08:47,310 ‫And then here we use that root reducer 125 00:08:47,310 --> 00:08:50,373 ‫and watch what's gonna happen then here in the output. 126 00:08:51,720 --> 00:08:54,900 ‫So see that, we see that now we have 127 00:08:54,900 --> 00:08:58,770 ‫both the account and the customer in our state. 128 00:08:58,770 --> 00:09:02,220 ‫And so these are the names that we gave right here. 129 00:09:02,220 --> 00:09:04,110 ‫So if we call them A and B 130 00:09:04,110 --> 00:09:07,356 ‫then that is the state that would appear here. 131 00:09:07,356 --> 00:09:11,797 ‫So basically that's the name of our state really. 132 00:09:11,797 --> 00:09:14,370 ‫So then if we open this up 133 00:09:14,370 --> 00:09:18,258 ‫inside the account is exactly the data that we had before. 134 00:09:18,258 --> 00:09:21,916 ‫And in the customer is still our initial state 135 00:09:21,916 --> 00:09:26,916 ‫because we didn't dispatch any actions yet. 136 00:09:26,994 --> 00:09:31,994 ‫So let's do that and actually use these two action creators 137 00:09:33,554 --> 00:09:35,973 ‫that we created in the beginning. 138 00:09:37,200 --> 00:09:39,777 ‫So store dispatch, 139 00:09:39,777 --> 00:09:44,777 ‫and then using our action creator, create customer. 140 00:09:46,499 --> 00:09:50,196 ‫And so here, let's pass in the full name. 141 00:09:50,196 --> 00:09:54,481 ‫You of course should use your own one. 142 00:09:54,481 --> 00:09:58,830 ‫So first of all, name and then the national id. 143 00:09:58,830 --> 00:10:02,637 ‫And here let's say it's some combinations of numbers 144 00:10:02,637 --> 00:10:03,783 ‫like this. 145 00:10:05,400 --> 00:10:09,240 ‫And then let's see what we have. 146 00:10:09,240 --> 00:10:12,150 ‫So let's see if this actually works. 147 00:10:12,150 --> 00:10:15,303 ‫So store dot.getState, and yeah 148 00:10:21,480 --> 00:10:26,133 ‫then it was created here at this moment in time. 149 00:10:32,640 --> 00:10:34,770 ‫And of course I could also use this one 150 00:10:34,770 --> 00:10:37,173 ‫but there's also no need to. 151 00:10:38,262 --> 00:10:43,262 ‫And of course all the other ones are still working. 152 00:10:43,320 --> 00:10:45,385 ‫So I can still, for example 153 00:10:45,385 --> 00:10:50,385 ‫call our deposit function and deposit 250 in there. 154 00:10:51,323 --> 00:10:56,323 ‫And let's do that here then. 155 00:10:56,490 --> 00:10:59,610 ‫So then previously my balance was 300 156 00:10:59,610 --> 00:11:01,770 ‫and then that got increased. 157 00:11:01,770 --> 00:11:06,770 ‫And so Redux is smart enough to know that, for example 158 00:11:06,904 --> 00:11:11,879 ‫this action right here belongs to the customer reducer 159 00:11:11,879 --> 00:11:13,638 ‫while these other ones 160 00:11:13,638 --> 00:11:16,881 ‫this one for example, belongs to the account. 161 00:11:16,881 --> 00:11:19,920 ‫Alright? And that has nothing to do 162 00:11:19,920 --> 00:11:24,060 ‫with the fact that we specified those here in the strings. 163 00:11:24,060 --> 00:11:27,060 ‫So this is really just a convention that we followed 164 00:11:27,060 --> 00:11:29,640 ‫but we could give it any name that we wanted. 165 00:11:29,640 --> 00:11:32,806 ‫So Redux is really not looking at these strings 166 00:11:32,806 --> 00:11:35,460 ‫that's only for us developers 167 00:11:35,460 --> 00:11:38,280 ‫so that we understand what we're actually doing. 168 00:11:38,280 --> 00:11:42,665 ‫But React only uses this information that we give it here. 169 00:11:42,665 --> 00:11:47,065 ‫And so then internally it figures out that, for example 170 00:11:47,065 --> 00:11:49,680 ‫this type here is for the account 171 00:11:49,680 --> 00:11:52,864 ‫and these other ones are for the customers. 172 00:11:52,864 --> 00:11:56,820 ‫Now, of course, all of this doesn't make a lot of, 173 00:11:56,820 --> 00:11:59,203 ‫let's say, real world sense. 174 00:11:59,203 --> 00:12:02,070 ‫So customers and accounts should of course 175 00:12:02,070 --> 00:12:04,440 ‫somehow be connected, for example 176 00:12:04,440 --> 00:12:06,810 ‫by some account number or so. 177 00:12:06,810 --> 00:12:09,525 ‫But that doesn't really matter here because here 178 00:12:09,525 --> 00:12:13,623 ‫we only want to really understand how Redux works. 179 00:12:13,623 --> 00:12:16,980 ‫And I think that we are doing a pretty good job 180 00:12:16,980 --> 00:12:18,598 ‫with that so far. 181 00:12:18,598 --> 00:12:23,162 ‫Now, next up, it's then time to finally organize this mess 182 00:12:23,162 --> 00:12:24,660 ‫that we have here 183 00:12:24,660 --> 00:12:27,243 ‫into a bit of a more professional structure.