1 00:00:01,050 --> 00:00:05,010 ‫So let's now start learning Redux in isolation. 2 00:00:05,010 --> 00:00:10,010 ‫So without React first by writing a simple reducer function. 3 00:00:11,490 --> 00:00:13,530 ‫Now, even though we are going to start 4 00:00:13,530 --> 00:00:17,520 ‫with Redux in isolation, we are still going to start 5 00:00:17,520 --> 00:00:20,850 ‫by creating a new React application now 6 00:00:20,850 --> 00:00:23,460 ‫so that we have some place 7 00:00:23,460 --> 00:00:27,030 ‫where we can actually write our Redux code. 8 00:00:27,030 --> 00:00:30,000 ‫So let's again come to the terminal 9 00:00:30,000 --> 00:00:34,170 ‫and navigate to the folder that we're interested in here. 10 00:00:34,170 --> 00:00:36,810 ‫And then since we are still learning 11 00:00:36,810 --> 00:00:41,010 ‫we can again use create-react-app. 12 00:00:41,010 --> 00:00:43,890 ‫So that's absolutely no problem. 13 00:00:43,890 --> 00:00:46,503 ‫And let's use, again, version five. 14 00:00:47,610 --> 00:00:52,083 ‫And here I'm just gonna call this redux-intro. 15 00:00:53,460 --> 00:00:56,580 ‫All right, so give it a few minutes 16 00:00:56,580 --> 00:00:59,973 ‫until this is installed and then let's meet back here. 17 00:01:03,570 --> 00:01:08,570 ‫Okay, so let's open up, as always, our starter files. 18 00:01:12,390 --> 00:01:17,390 ‫And so I'm gonna grab these and then place them right here. 19 00:01:18,180 --> 00:01:23,180 ‫And as always, renaming it and placing that right here. 20 00:01:25,890 --> 00:01:29,770 ‫And then we need to replace these files that already exists 21 00:01:30,690 --> 00:01:35,610 ‫and let's also immediately get rid of this junk. 22 00:01:35,610 --> 00:01:38,640 ‫So these three files we don't need 23 00:01:38,640 --> 00:01:42,330 ‫and also this CSS file right here. 24 00:01:42,330 --> 00:01:47,250 ‫So we only need the index.css file that I provided for you 25 00:01:47,250 --> 00:01:49,803 ‫and also this test file. 26 00:01:51,480 --> 00:01:56,313 ‫Okay, then let's take this and open it up. 27 00:01:59,790 --> 00:02:01,320 ‫Okay. 28 00:02:01,320 --> 00:02:04,080 ‫And now all we are going to do for now 29 00:02:04,080 --> 00:02:08,793 ‫is in this source folder, create a new file called store.js. 30 00:02:11,940 --> 00:02:14,700 ‫And so this is where we are going to write 31 00:02:14,700 --> 00:02:17,310 ‫our pure Redux code. 32 00:02:17,310 --> 00:02:20,400 ‫So basically, Redux without React 33 00:02:20,400 --> 00:02:24,780 ‫so that we can really understand Redux in isolation first. 34 00:02:24,780 --> 00:02:28,440 ‫And later, of course, we will then integrate the two. 35 00:02:28,440 --> 00:02:31,230 ‫So what we're gonna do in this section 36 00:02:31,230 --> 00:02:33,090 ‫is to model the bank account 37 00:02:33,090 --> 00:02:35,700 ‫that we have already talked about earlier, 38 00:02:35,700 --> 00:02:37,950 ‫but again, a bit simpler. 39 00:02:37,950 --> 00:02:41,880 ‫So without an account number and only with a balance, 40 00:02:41,880 --> 00:02:45,210 ‫a loan and also a loan purpose. 41 00:02:45,210 --> 00:02:47,790 ‫And actually let's start with that. 42 00:02:47,790 --> 00:02:50,170 ‫So just like we useReducer 43 00:02:51,150 --> 00:02:54,753 ‫we start by creating some initialState object. 44 00:02:56,100 --> 00:02:57,727 ‫So initialState. 45 00:02:59,820 --> 00:03:02,613 ‫And then let's set the balance to zero, 46 00:03:03,660 --> 00:03:06,933 ‫also the loan amount to zero. 47 00:03:08,640 --> 00:03:10,800 ‫And then here I'm also gonna introduce 48 00:03:10,800 --> 00:03:14,760 ‫a third basically state variable, 49 00:03:14,760 --> 00:03:18,213 ‫which I'm gonna call the loanPurpose. 50 00:03:19,290 --> 00:03:22,290 ‫So whenever the user asks for a loan 51 00:03:22,290 --> 00:03:25,833 ‫they also need to specify the purpose of that loan. 52 00:03:27,030 --> 00:03:32,030 ‫Okay, and now again, just like with the useReducer hook 53 00:03:32,070 --> 00:03:35,403 ‫it's time to define the reducer function. 54 00:03:37,290 --> 00:03:40,200 ‫So we can just call this reducer for now. 55 00:03:40,200 --> 00:03:45,200 ‫And as always, it receives the state and the action. 56 00:03:45,240 --> 00:03:48,540 ‫And so remember that the goal of the reducer 57 00:03:48,540 --> 00:03:52,590 ‫is to calculate the new state based on the current state 58 00:03:52,590 --> 00:03:55,290 ‫and on the received action. 59 00:03:55,290 --> 00:03:57,330 ‫Now, it's also important to remember 60 00:03:57,330 --> 00:04:01,830 ‫that reducers are not allowed to modify the existing state 61 00:04:01,830 --> 00:04:05,850 ‫and they're also not allowed to do any asynchronous logic 62 00:04:05,850 --> 00:04:08,250 ‫or other side effects. 63 00:04:08,250 --> 00:04:11,340 ‫So instead, what we should do with reducers 64 00:04:11,340 --> 00:04:15,983 ‫is to place as much logic as possible inside of them, okay? 65 00:04:17,100 --> 00:04:20,400 ‫But anyway, one thing that is actually different 66 00:04:20,400 --> 00:04:25,290 ‫between this reducer and the reducer in the useReducer hook 67 00:04:25,290 --> 00:04:29,610 ‫is that usually we directly pass in the initialState 68 00:04:29,610 --> 00:04:31,353 ‫as the default state. 69 00:04:33,240 --> 00:04:37,830 ‫So using here this default parameter in JavaScript. 70 00:04:37,830 --> 00:04:40,650 ‫So this is just a normal JavaScript feature 71 00:04:40,650 --> 00:04:43,050 ‫where you can specify a default parameter 72 00:04:43,050 --> 00:04:45,030 ‫in case there is none set. 73 00:04:45,030 --> 00:04:48,300 ‫So with this, we make this initialState here 74 00:04:48,300 --> 00:04:50,463 ‫really the state at the very beginning. 75 00:04:52,470 --> 00:04:55,470 ‫So then let's again use a switch statement 76 00:04:55,470 --> 00:05:00,470 ‫to basically select the action.type. 77 00:05:00,630 --> 00:05:03,390 ‫So the actions that are going to be dispatched 78 00:05:03,390 --> 00:05:07,710 ‫to this reducer, or actually to the Redux store, 79 00:05:07,710 --> 00:05:12,630 ‫they will again have the shape of a type and a payload. 80 00:05:12,630 --> 00:05:16,950 ‫And so basically, our reducer will look exactly the same way 81 00:05:16,950 --> 00:05:19,050 ‫as we are used to already. 82 00:05:19,050 --> 00:05:22,980 ‫And so that's why it is now so easy to learn Redux 83 00:05:22,980 --> 00:05:24,630 ‫when you already know useReducer. 84 00:05:26,550 --> 00:05:30,840 ‫So here we now need to specify our actions as always. 85 00:05:30,840 --> 00:05:33,450 ‫And so let's do that. 86 00:05:33,450 --> 00:05:34,890 ‫Now, back in the day 87 00:05:34,890 --> 00:05:38,130 ‫action types used to be written all uppercase. 88 00:05:38,130 --> 00:05:39,870 ‫For example, like this. 89 00:05:39,870 --> 00:05:44,870 ‫Like SET_BALANCE or maybe DEPOSIT_ACCOUNT. 90 00:05:49,860 --> 00:05:52,950 ‫So if you check out some older Redux code base 91 00:05:52,950 --> 00:05:54,240 ‫then usually you will see 92 00:05:54,240 --> 00:05:57,660 ‫that the action type is called something like this. 93 00:05:57,660 --> 00:06:02,640 ‫So many times it's a setter and all uppercase like this. 94 00:06:02,640 --> 00:06:05,850 ‫However, nowadays the Redux team advises 95 00:06:05,850 --> 00:06:09,300 ‫to write these action names in a different way. 96 00:06:09,300 --> 00:06:13,230 ‫So usually these action names should model what happened 97 00:06:13,230 --> 00:06:14,910 ‫or what should happen. 98 00:06:14,910 --> 00:06:18,663 ‫And so we write them in the shape of the state domain. 99 00:06:19,856 --> 00:06:21,750 ‫So that's the account in this case. 100 00:06:21,750 --> 00:06:23,883 ‫And then the event name. 101 00:06:25,140 --> 00:06:27,990 ‫So let's start with deposit here. 102 00:06:27,990 --> 00:06:30,930 ‫And I think we already touched on this earlier 103 00:06:30,930 --> 00:06:33,213 ‫in the WorldWise application as well. 104 00:06:35,640 --> 00:06:39,810 ‫But anyway, now we need to again, as always, 105 00:06:39,810 --> 00:06:42,420 ‫return the current state. 106 00:06:42,420 --> 00:06:46,950 ‫So spreading all the current state into this new state 107 00:06:46,950 --> 00:06:49,740 ‫that will be returned from here. 108 00:06:49,740 --> 00:06:54,450 ‫And then we want to set the balance to the current balance. 109 00:06:54,450 --> 00:06:57,000 ‫So that's at state.balance. 110 00:06:57,000 --> 00:07:01,173 ‫Plus the actions type load, or payload. 111 00:07:02,070 --> 00:07:04,530 ‫So action.payload, 112 00:07:04,530 --> 00:07:06,930 ‫which remember, is basically the data 113 00:07:06,930 --> 00:07:09,480 ‫that gets passed into the reducer 114 00:07:09,480 --> 00:07:12,090 ‫when the action is dispatched. 115 00:07:12,090 --> 00:07:14,160 ‫And again, it's very important 116 00:07:14,160 --> 00:07:17,100 ‫that you understand everything that we did earlier 117 00:07:17,100 --> 00:07:18,870 ‫with the useReducer hook. 118 00:07:18,870 --> 00:07:22,170 ‫Cause this is exactly the same thing. 119 00:07:22,170 --> 00:07:24,930 ‫Okay, then let's just duplicate this here 120 00:07:24,930 --> 00:07:26,313 ‫for the withdrawal. 121 00:07:29,340 --> 00:07:32,400 ‫Or actually let's just call this withdraw. 122 00:07:32,400 --> 00:07:35,313 ‫And so here it is then minus that. 123 00:07:36,180 --> 00:07:41,010 ‫Okay, let's also add already our default case. 124 00:07:41,010 --> 00:07:43,500 ‫But here we do it a bit different. 125 00:07:43,500 --> 00:07:46,800 ‫So before, we would usually throw 126 00:07:46,800 --> 00:07:50,700 ‫some new error right here, right? 127 00:07:50,700 --> 00:07:52,050 ‫However, in Redux, 128 00:07:52,050 --> 00:07:55,260 ‫or for some reason it is advised to not do that 129 00:07:55,260 --> 00:07:59,580 ‫and instead to simply return the original state. 130 00:07:59,580 --> 00:08:03,270 ‫So basically in case that the reducer receives an action 131 00:08:03,270 --> 00:08:04,770 ‫that it doesn't know about 132 00:08:04,770 --> 00:08:07,713 ‫it will simply return the original state back. 133 00:08:09,480 --> 00:08:11,970 ‫So the state will simply not be updated 134 00:08:11,970 --> 00:08:14,283 ‫but there also won't be an error. 135 00:08:15,750 --> 00:08:20,160 ‫Okay, next up again, account. 136 00:08:20,160 --> 00:08:22,470 ‫So all of these are about accounts. 137 00:08:22,470 --> 00:08:25,620 ‫And so all our action names in this reducer 138 00:08:25,620 --> 00:08:28,500 ‫will start with the account prefix. 139 00:08:28,500 --> 00:08:30,720 ‫But later we will have another reducer 140 00:08:30,720 --> 00:08:34,053 ‫which will then have another state domain name. 141 00:08:35,190 --> 00:08:38,890 ‫So here the next one is for request a loan 142 00:08:40,800 --> 00:08:44,460 ‫which can only happen if there is no loan yet. 143 00:08:44,460 --> 00:08:49,460 ‫So if state.loan is greater than zero 144 00:08:50,610 --> 00:08:53,133 ‫then just return the current state. 145 00:08:54,480 --> 00:08:59,480 ‫But if not not, well, then return the current state 146 00:09:00,300 --> 00:09:03,363 ‫and let's update then the loan. 147 00:09:04,650 --> 00:09:09,300 ‫So that will be the action.payload. 148 00:09:09,300 --> 00:09:13,383 ‫And actually, it should be action.payload.purpose. 149 00:09:14,790 --> 00:09:17,310 ‫So like this. 150 00:09:17,310 --> 00:09:20,310 ‫However, we haven't really dispatched the action yet. 151 00:09:20,310 --> 00:09:23,280 ‫And so this is gonna look a little bit confusing. 152 00:09:23,280 --> 00:09:26,820 ‫So I think that maybe we should actually leave this 153 00:09:26,820 --> 00:09:28,440 ‫for a little bit later. 154 00:09:28,440 --> 00:09:30,870 ‫So this entire part right here. 155 00:09:30,870 --> 00:09:35,870 ‫So we will only write this part here of the reducer later. 156 00:09:36,570 --> 00:09:39,663 ‫So basically, in the next lecture. 157 00:09:42,090 --> 00:09:44,370 ‫But now we can also do the last one 158 00:09:44,370 --> 00:09:46,683 ‫which is to pay the loan back. 159 00:09:49,890 --> 00:09:53,490 ‫Cause this one is a lot simpler. 160 00:09:53,490 --> 00:09:54,850 ‫So what's gonna happen here 161 00:09:55,830 --> 00:10:00,750 ‫is that the loan will be set back to zero, 162 00:10:00,750 --> 00:10:05,343 ‫the loan purpose will be set back to the empty string. 163 00:10:07,110 --> 00:10:10,770 ‫And of course, we need to then take that value 164 00:10:10,770 --> 00:10:11,943 ‫out of the balance. 165 00:10:12,900 --> 00:10:17,343 ‫So state.balance minus the loan. 166 00:10:22,530 --> 00:10:25,980 ‫Okay, and if this is a bit confusing, 167 00:10:25,980 --> 00:10:29,490 ‫so the way in which we are modeling this bank account, 168 00:10:29,490 --> 00:10:31,080 ‫it will become more clear 169 00:10:31,080 --> 00:10:33,813 ‫once we start using this reducer soon. 170 00:10:34,950 --> 00:10:38,730 ‫All right, so with this we have our reducer in place 171 00:10:38,730 --> 00:10:42,060 ‫and so now we can create our store. 172 00:10:42,060 --> 00:10:44,943 ‫And so let's do that in the next lecture.