1 00:00:00,990 --> 00:00:03,750 ‫As always, let's start by getting 2 00:00:03,750 --> 00:00:07,860 ‫a good understanding of what Redux actually is 3 00:00:07,860 --> 00:00:11,100 ‫and how the mechanics of Redux work 4 00:00:11,100 --> 00:00:14,703 ‫especially when compared with the useReducer hook. 5 00:00:15,540 --> 00:00:20,040 ‫So in a nutshell, Redux is a third-party library 6 00:00:20,040 --> 00:00:25,040 ‫that we can use to manage global state in a web application. 7 00:00:25,380 --> 00:00:27,660 ‫And I say web application, 8 00:00:27,660 --> 00:00:32,100 ‫because Redux is actually a complete standalone library 9 00:00:32,100 --> 00:00:34,800 ‫that we could use with any framework 10 00:00:34,800 --> 00:00:37,290 ‫or even Vanilla JavaScript. 11 00:00:37,290 --> 00:00:41,760 ‫However, Redux has always been tightly linked to React 12 00:00:41,760 --> 00:00:44,940 ‫and they are actually quite easy to connect 13 00:00:44,940 --> 00:00:48,750 ‫using the react-redux library as we will do 14 00:00:48,750 --> 00:00:50,760 ‫throughout this section. 15 00:00:50,760 --> 00:00:53,850 ‫Now, the big idea behind Redux is that 16 00:00:53,850 --> 00:00:57,510 ‫all the global state in your application can be stored 17 00:00:57,510 --> 00:01:00,930 ‫inside this one globally accessible store 18 00:01:00,930 --> 00:01:04,470 ‫which we can then update using actions. 19 00:01:04,470 --> 00:01:06,660 ‫And if this sounds familiar, 20 00:01:06,660 --> 00:01:08,880 ‫it's because the useReducer hook 21 00:01:08,880 --> 00:01:11,640 ‫implements a very similar pattern. 22 00:01:11,640 --> 00:01:15,150 ‫So updating state by dispatching actions. 23 00:01:15,150 --> 00:01:19,680 ‫Remember and in fact, the mechanism behind Redux 24 00:01:19,680 --> 00:01:22,320 ‫and useReducer is so similar 25 00:01:22,320 --> 00:01:26,190 ‫that I will assume that you know how to use useReducer 26 00:01:26,190 --> 00:01:30,000 ‫and build the teaching of Redux onto the knowledge 27 00:01:30,000 --> 00:01:32,010 ‫that you already have. 28 00:01:32,010 --> 00:01:35,790 ‫So again, you should have a pretty good understanding 29 00:01:35,790 --> 00:01:40,410 ‫of the useReducer hook in order to move on in this section. 30 00:01:40,410 --> 00:01:41,640 ‫And if you don't 31 00:01:41,640 --> 00:01:45,123 ‫then please go back to that useReducer section first. 32 00:01:45,990 --> 00:01:49,380 ‫But anyway, the idea of updating state 33 00:01:49,380 --> 00:01:53,370 ‫in React and in Redux is always the same. 34 00:01:53,370 --> 00:01:57,660 ‫So in the case of Redux, as soon as we update the store 35 00:01:57,660 --> 00:02:00,750 ‫all the React components that consume some data 36 00:02:00,750 --> 00:02:04,140 ‫from the store will be re-rendered. 37 00:02:04,140 --> 00:02:07,260 ‫So conceptually, if we think about this 38 00:02:07,260 --> 00:02:09,840 ‫Redux is actually quite similar 39 00:02:09,840 --> 00:02:13,890 ‫to combining the Context API with the useReducer hook 40 00:02:13,890 --> 00:02:16,890 ‫as we have done in the World Wise app. 41 00:02:16,890 --> 00:02:19,800 ‫And in fact, many developers even say 42 00:02:19,800 --> 00:02:24,210 ‫that the Context API is a replacement for Redux. 43 00:02:24,210 --> 00:02:27,960 ‫However, the truth is a bit more nuanced than that 44 00:02:27,960 --> 00:02:30,810 ‫as we will discuss by the end of the section 45 00:02:30,810 --> 00:02:35,250 ‫once you have some experience with both of these tools. 46 00:02:35,250 --> 00:02:38,160 ‫Now Redux has a long history 47 00:02:38,160 --> 00:02:42,420 ‫and so today, there are basically two versions of Redux. 48 00:02:42,420 --> 00:02:46,350 ‫So two different ways of writing Redux applications, 49 00:02:46,350 --> 00:02:50,460 ‫but which are totally compatible with each other. 50 00:02:50,460 --> 00:02:54,900 ‫So we have the classic Redux and we have the more modern way 51 00:02:54,900 --> 00:02:58,440 ‫of writing Redux with Redux Toolkit. 52 00:02:58,440 --> 00:03:01,800 ‫And as you would expect, we will learn both of them 53 00:03:01,800 --> 00:03:05,190 ‫in this section starting with classic Redux 54 00:03:05,190 --> 00:03:08,550 ‫so that you get the right foundations. 55 00:03:08,550 --> 00:03:13,230 ‫Okay, now before we move on to learn how Redux works 56 00:03:13,230 --> 00:03:17,133 ‫let's quickly check out when we should actually use Redux. 57 00:03:18,240 --> 00:03:20,844 ‫And let's start with some history. 58 00:03:20,844 --> 00:03:24,180 ‫So historically, a few years back 59 00:03:24,180 --> 00:03:28,470 ‫Redux was used in almost every React app out there 60 00:03:28,470 --> 00:03:31,620 ‫for all global state management needs. 61 00:03:31,620 --> 00:03:34,200 ‫So you really needed to know Redux. 62 00:03:34,200 --> 00:03:38,790 ‫It was as if Redux was even part of React. 63 00:03:38,790 --> 00:03:42,630 ‫Today, however the landscape has changed tremendously, 64 00:03:42,630 --> 00:03:45,270 ‫because there are now many alternatives 65 00:03:45,270 --> 00:03:47,100 ‫as we have already talked about 66 00:03:47,100 --> 00:03:49,830 ‫in the advanced state management lecture 67 00:03:49,830 --> 00:03:52,110 ‫in a previous section. 68 00:03:52,110 --> 00:03:56,820 ‫So today, many apps don't actually need Redux anymore 69 00:03:56,820 --> 00:04:00,240 ‫and also don't use Redux anymore. 70 00:04:00,240 --> 00:04:01,230 ‫And this means 71 00:04:01,230 --> 00:04:05,430 ‫that you might not even need to learn Redux right now. 72 00:04:05,430 --> 00:04:09,300 ‫So why is it included in this course then? 73 00:04:09,300 --> 00:04:11,910 ‫Well, for three big reasons. 74 00:04:11,910 --> 00:04:14,940 ‫First, since Redux has a reputation 75 00:04:14,940 --> 00:04:17,160 ‫for being very hard to learn 76 00:04:17,160 --> 00:04:20,280 ‫this was probably the most requested topic 77 00:04:20,280 --> 00:04:23,160 ‫for this course by my current students. 78 00:04:23,160 --> 00:04:27,420 ‫And I think that this course does teach it pretty well 79 00:04:27,420 --> 00:04:30,210 ‫in an easy to understand way. 80 00:04:30,210 --> 00:04:32,970 ‫Second, when you're working on a team 81 00:04:32,970 --> 00:04:35,820 ‫you will likely work with an older code base 82 00:04:35,820 --> 00:04:39,270 ‫and then you will definitely encounter Redux. 83 00:04:39,270 --> 00:04:41,970 ‫Therefore, you need to learn how it works 84 00:04:41,970 --> 00:04:44,205 ‫even if you don't master it. 85 00:04:44,205 --> 00:04:48,480 ‫And third, some applications do actually require 86 00:04:48,480 --> 00:04:50,190 ‫something like Redux. 87 00:04:50,190 --> 00:04:53,130 ‫And so, let's take a look at when that is 88 00:04:53,130 --> 00:04:58,050 ‫by bringing back this overview from a previous lecture. 89 00:04:58,050 --> 00:05:00,060 ‫So my recommendation 90 00:05:00,060 --> 00:05:02,940 ‫and the recommendation of many experts 91 00:05:02,940 --> 00:05:07,050 ‫is to use a global state management library like Redux, 92 00:05:07,050 --> 00:05:10,380 ‫only when you have lots of global UI state 93 00:05:10,380 --> 00:05:12,930 ‫that you need to update frequently. 94 00:05:12,930 --> 00:05:16,620 ‫And remember that UI state basically means state 95 00:05:16,620 --> 00:05:19,320 ‫that is not fetched from a server 96 00:05:19,320 --> 00:05:21,720 ‫that would be remote state. 97 00:05:21,720 --> 00:05:25,920 ‫So UI state is simply data about the UI itself 98 00:05:25,920 --> 00:05:28,830 ‫or data that doesn't need to be communicated 99 00:05:28,830 --> 00:05:31,050 ‫to an API or so. 100 00:05:31,050 --> 00:05:34,230 ‫And this distinction is really important, 101 00:05:34,230 --> 00:05:37,830 ‫because remember for global remote state 102 00:05:37,830 --> 00:05:42,090 ‫we have many better options nowadays like React Query, 103 00:05:42,090 --> 00:05:46,020 ‫SWR, or even a tool that is kind of included 104 00:05:46,020 --> 00:05:51,003 ‫in modern Redux Toolkit, which is Redux Toolkit Query. 105 00:05:51,930 --> 00:05:55,200 ‫So again, do you need to manage a lot 106 00:05:55,200 --> 00:05:58,110 ‫of non-remote state in your app, 107 00:05:58,110 --> 00:06:01,140 ‫then Redux might be perfect for that. 108 00:06:01,140 --> 00:06:06,090 ‫But the truth is that most global state is actually remote 109 00:06:06,090 --> 00:06:08,850 ‫which is the reason why so many apps 110 00:06:08,850 --> 00:06:11,370 ‫don't use Redux anymore. 111 00:06:11,370 --> 00:06:14,910 ‫But we are actually here to learn Redux 112 00:06:14,910 --> 00:06:18,090 ‫at least if you still think that it's worthwhile. 113 00:06:18,090 --> 00:06:20,700 ‫And I personally think that it is. 114 00:06:20,700 --> 00:06:23,760 ‫And so, let's now quickly look at the mechanics 115 00:06:23,760 --> 00:06:25,683 ‫of how Redux works. 116 00:06:27,600 --> 00:06:30,120 ‫So as I said in the very beginning, 117 00:06:30,120 --> 00:06:32,280 ‫this won't be too hard for you, 118 00:06:32,280 --> 00:06:35,850 ‫because you already know how useReducer works. 119 00:06:35,850 --> 00:06:39,090 ‫And so, let's just quickly review that. 120 00:06:39,090 --> 00:06:42,720 ‫So with useReducer when we want to update state 121 00:06:42,720 --> 00:06:45,150 ‫from an event handler in a component 122 00:06:45,150 --> 00:06:48,210 ‫we start by creating an action. 123 00:06:48,210 --> 00:06:51,600 ‫This action is simply an object that usually contains 124 00:06:51,600 --> 00:06:53,850 ‫a type and a payload, 125 00:06:53,850 --> 00:06:58,140 ‫which is information about how the state should be updated. 126 00:06:58,140 --> 00:07:00,570 ‫We then dispatch that action 127 00:07:00,570 --> 00:07:03,270 ‫to a so-called reducer function. 128 00:07:03,270 --> 00:07:07,080 ‫The reducer takes the action type and the payload, 129 00:07:07,080 --> 00:07:09,540 ‫and together with the current state 130 00:07:09,540 --> 00:07:14,540 ‫calculates the next state, so the new state value. 131 00:07:14,910 --> 00:07:17,610 ‫And to finish as the state updates, 132 00:07:17,610 --> 00:07:19,080 ‫of course, the component 133 00:07:19,080 --> 00:07:22,893 ‫that originated the state transition will re-render. 134 00:07:23,820 --> 00:07:27,810 ‫So this mechanism should be familiar to you at this point, 135 00:07:27,810 --> 00:07:31,830 ‫because now we're gonna add two more things onto this 136 00:07:31,830 --> 00:07:35,220 ‫in order to learn how Redux works. 137 00:07:35,220 --> 00:07:36,720 ‫So the first difference 138 00:07:36,720 --> 00:07:39,450 ‫between useReducer and Redux 139 00:07:39,450 --> 00:07:43,050 ‫is that in Redux we actually dispatch actions 140 00:07:43,050 --> 00:07:45,150 ‫not simply to the reducer, 141 00:07:45,150 --> 00:07:47,970 ‫but to the store that we talked about 142 00:07:47,970 --> 00:07:49,560 ‫at the beginning. 143 00:07:49,560 --> 00:07:52,560 ‫So this store is a centralized container 144 00:07:52,560 --> 00:07:55,170 ‫where all global state lives. 145 00:07:55,170 --> 00:07:57,690 ‫It's like the single source of truth 146 00:07:57,690 --> 00:08:02,010 ‫of all global state across the entire application. 147 00:08:02,010 --> 00:08:06,575 ‫The store is also where one or multiple reducers live. 148 00:08:06,575 --> 00:08:08,670 ‫And just as a reminder 149 00:08:08,670 --> 00:08:11,700 ‫each reducer must be a pure function 150 00:08:11,700 --> 00:08:15,630 ‫that has the single task of calculating the next state 151 00:08:15,630 --> 00:08:19,110 ‫based on the action that was dispatched to the store 152 00:08:19,110 --> 00:08:22,803 ‫and the current state that's already in the store as well. 153 00:08:23,760 --> 00:08:27,450 ‫Now, you might be wondering why there are multiple reducers 154 00:08:27,450 --> 00:08:29,220 ‫in this store. 155 00:08:29,220 --> 00:08:32,280 ‫Well, it's because we should create one reducer 156 00:08:32,280 --> 00:08:36,000 ‫per application feature or per data domain 157 00:08:36,000 --> 00:08:38,850 ‫in order to keep things separated. 158 00:08:38,850 --> 00:08:42,510 ‫For example, in a shopping app, you could have one reducer 159 00:08:42,510 --> 00:08:46,170 ‫for the shopping cart, one for some user data, 160 00:08:46,170 --> 00:08:50,610 ‫and one for the application color theme, for example. 161 00:08:50,610 --> 00:08:53,970 ‫Finally, any component that consumes the state 162 00:08:53,970 --> 00:08:56,160 ‫that has been updated in the store 163 00:08:56,160 --> 00:08:59,940 ‫will as always get re-rendered by React 164 00:08:59,940 --> 00:09:01,560 ‫at least if we're assuming 165 00:09:01,560 --> 00:09:05,133 ‫that reusing Redux together with a React app. 166 00:09:06,120 --> 00:09:08,880 ‫Okay, so that's the Redux store, 167 00:09:08,880 --> 00:09:12,480 ‫but now let's focus on the action again. 168 00:09:12,480 --> 00:09:15,570 ‫So in the real world when we use Redux 169 00:09:15,570 --> 00:09:19,080 ‫we usually use functions called action creators 170 00:09:19,080 --> 00:09:23,580 ‫in order to automate the process of writing actions. 171 00:09:23,580 --> 00:09:26,910 ‫So basically, instead of always writing 172 00:09:26,910 --> 00:09:29,160 ‫these action objects by hand, 173 00:09:29,160 --> 00:09:32,850 ‫we create functions that do this automatically. 174 00:09:32,850 --> 00:09:35,670 ‫This has the advantage to keep all actions 175 00:09:35,670 --> 00:09:37,350 ‫in one central place 176 00:09:37,350 --> 00:09:39,030 ‫which reduces bucks, 177 00:09:39,030 --> 00:09:41,700 ‫because developers don't have to remember 178 00:09:41,700 --> 00:09:44,490 ‫the exact action type strings. 179 00:09:44,490 --> 00:09:49,470 ‫Just note that this is optional and not a feature of Redux. 180 00:09:49,470 --> 00:09:53,400 ‫It's just how we build real world Redux apps. 181 00:09:53,400 --> 00:09:56,040 ‫Then the rest of the process is of course 182 00:09:56,040 --> 00:09:57,933 ‫just what I explained before. 183 00:09:58,980 --> 00:10:03,510 ‫Okay, so let's recap how this Redux cycle works 184 00:10:03,510 --> 00:10:05,490 ‫as I like to call it. 185 00:10:05,490 --> 00:10:09,180 ‫So in order to update global state with Redux, 186 00:10:09,180 --> 00:10:12,960 ‫we start by calling an action creator in a component 187 00:10:12,960 --> 00:10:16,200 ‫and then dispatch the action that resulted 188 00:10:16,200 --> 00:10:18,420 ‫from the action creator. 189 00:10:18,420 --> 00:10:21,270 ‫This action will then reach the store 190 00:10:21,270 --> 00:10:25,440 ‫where the right reducer will pick it up and update the state 191 00:10:25,440 --> 00:10:27,900 ‫according to the instructions. 192 00:10:27,900 --> 00:10:31,110 ‫This then triggers a re-render of the UI 193 00:10:31,110 --> 00:10:33,390 ‫where the cycle finishes. 194 00:10:33,390 --> 00:10:37,020 ‫And the big goal of all this is to make the state 195 00:10:37,020 --> 00:10:41,760 ‫update logic separate from the rest of the application. 196 00:10:41,760 --> 00:10:45,060 ‫And now just for fun, we can take it back 197 00:10:45,060 --> 00:10:46,860 ‫to the bank analogy, 198 00:10:46,860 --> 00:10:50,160 ‫when we first talked about useReducer, 199 00:10:50,160 --> 00:10:53,730 ‫so remember how we said that when you need to take 200 00:10:53,730 --> 00:10:56,640 ‫or to place money into a bank account, 201 00:10:56,640 --> 00:10:59,310 ‫you don't do that yourself directly, 202 00:10:59,310 --> 00:11:03,360 ‫but instead you go to the person at the desk in the bank 203 00:11:03,360 --> 00:11:06,570 ‫in order to give them your instructions. 204 00:11:06,570 --> 00:11:09,594 ‫So you don't update the bank vault yourself. 205 00:11:09,594 --> 00:11:13,410 ‫And Redux is just like that as well. 206 00:11:13,410 --> 00:11:17,190 ‫So taking the example of depositing $50 207 00:11:17,190 --> 00:11:20,790 ‫you would definitely be the action creator 208 00:11:20,790 --> 00:11:24,510 ‫as you are the one giving the instructions. 209 00:11:24,510 --> 00:11:27,720 ‫The instructions themselves are the action 210 00:11:27,720 --> 00:11:30,150 ‫and the person that you're talking to 211 00:11:30,150 --> 00:11:32,790 ‫is very clearly the dispatcher, 212 00:11:32,790 --> 00:11:36,570 ‫because he is the one who will instruct the bank vault 213 00:11:36,570 --> 00:11:38,040 ‫to be updated. 214 00:11:38,040 --> 00:11:41,370 ‫So the bank's vault is like the Redux store 215 00:11:41,370 --> 00:11:43,320 ‫that you can touch directly, 216 00:11:43,320 --> 00:11:46,350 ‫but only through the dispatcher. 217 00:11:46,350 --> 00:11:50,550 ‫And there you have it, this is how Redux works. 218 00:11:50,550 --> 00:11:55,020 ‫Do you still think that it's super-hard and super-confusing? 219 00:11:55,020 --> 00:12:00,020 ‫Well, maybe you do and that's 100% not a problem. 220 00:12:00,510 --> 00:12:02,490 ‫So I will guide you step by step 221 00:12:02,490 --> 00:12:06,000 ‫through the Redux fundamentals throughout this section. 222 00:12:06,000 --> 00:12:07,770 ‫And by the end of it all 223 00:12:07,770 --> 00:12:10,593 ‫I promise that it will be crystal clear.