1 00:00:00,350 --> 00:00:04,670 Okay, So now we're going to jump back into our front end and we're going to start to implement Redux 2 00:00:04,670 --> 00:00:06,220 and Redux Toolkit. 3 00:00:06,230 --> 00:00:12,920 So Redux is a popular JavaScript library for managing application state, and it's often used with React, 4 00:00:12,920 --> 00:00:19,940 but it can be used with other UI libraries slash frameworks, and there's many other state management 5 00:00:19,940 --> 00:00:21,050 libraries available. 6 00:00:21,050 --> 00:00:24,440 But Redux is one of the most popular and well supported. 7 00:00:24,440 --> 00:00:26,270 It's been around for a long time. 8 00:00:26,270 --> 00:00:29,570 There's a lot of documentation and examples, etcetera. 9 00:00:29,570 --> 00:00:33,710 Now I will admit that redux can be kind of confusing at first. 10 00:00:33,710 --> 00:00:37,010 It's a tool that does take some practice to use effectively. 11 00:00:37,010 --> 00:00:42,530 However, once you get the hang of it, it can make building really complex applications much easier. 12 00:00:42,530 --> 00:00:47,870 And in this course we're going to be using Redux Toolkit, which is a package that includes several 13 00:00:47,870 --> 00:00:52,100 tools to help making Working with Redux easier. 14 00:00:52,400 --> 00:00:58,700 It addresses a lot of the issues that Redux has just using it by itself, especially when it comes to 15 00:00:58,700 --> 00:01:02,250 making requests and dealing with back end APIs. 16 00:01:02,250 --> 00:01:06,650 So before we dive into Redux, let's just talk a little bit about State. 17 00:01:06,660 --> 00:01:08,640 So there's component level. 18 00:01:08,640 --> 00:01:15,300 State which is state that is only it only matters in that actual component. 19 00:01:15,300 --> 00:01:23,040 So for instance, if we have like a header like we have here, we have a menu and this menu collapses, 20 00:01:23,040 --> 00:01:23,370 right? 21 00:01:23,370 --> 00:01:25,020 It can be open and closed. 22 00:01:25,020 --> 00:01:27,990 So you might have a piece of state called is open. 23 00:01:27,990 --> 00:01:29,190 That's set to true. 24 00:01:29,190 --> 00:01:31,650 When it's open, it's set to false when it's not. 25 00:01:31,650 --> 00:01:33,870 That only pertains to this component. 26 00:01:33,870 --> 00:01:36,840 The rest of the application doesn't care about that. 27 00:01:36,840 --> 00:01:38,430 So that's component state. 28 00:01:38,430 --> 00:01:46,680 Now app or global State is state that is going to be distributed to multiple components. 29 00:01:46,680 --> 00:01:52,710 So an example would be the actual products here that we're fetching from the back end that's going to 30 00:01:52,710 --> 00:01:54,720 be put in app level state. 31 00:01:54,720 --> 00:02:01,050 Although right now if we look in the home screen, we're just keeping it in this component using the 32 00:02:01,050 --> 00:02:09,449 use state hook use state is really for component level state and not global or app level state. 33 00:02:09,449 --> 00:02:11,370 So we're going to switch this up. 34 00:02:11,370 --> 00:02:13,560 This isn't this isn't like the end result. 35 00:02:13,560 --> 00:02:15,930 I just wanted to get something on the page. 36 00:02:15,930 --> 00:02:19,350 But yeah, so that's the difference between component and app level. 37 00:02:19,350 --> 00:02:21,570 State also called global state. 38 00:02:21,900 --> 00:02:28,620 Now state management refers to the way that we manage the data that our application needs to keep track 39 00:02:28,620 --> 00:02:29,100 of. 40 00:02:29,130 --> 00:02:31,740 So I just want to give you a quick example. 41 00:02:31,740 --> 00:02:32,670 You guys don't have to do this. 42 00:02:32,670 --> 00:02:35,580 I'm just going to use this file to to type in. 43 00:02:35,580 --> 00:02:40,650 But let's say we have a to do a little to do application. 44 00:02:40,650 --> 00:02:45,090 We might need to keep track of the items that the user adds to the list. 45 00:02:45,540 --> 00:02:52,500 So we might have something like a variable called items and that would be an empty array. 46 00:02:52,500 --> 00:02:55,800 And then maybe we have some filters. 47 00:02:55,800 --> 00:03:03,750 So we could say like const filter and that could be set to all or completed or whatever. 48 00:03:03,750 --> 00:03:05,940 So that's an example of state. 49 00:03:05,940 --> 00:03:09,510 Now this is a very simple example, but it shows the basic idea. 50 00:03:09,510 --> 00:03:15,870 We have two variables that we keep track of, and that's our state for application. 51 00:03:15,870 --> 00:03:23,460 Now we can add items to the list this items array by using push, right? 52 00:03:23,460 --> 00:03:25,410 So we might have a function. 53 00:03:26,080 --> 00:03:27,820 Called Add item. 54 00:03:29,390 --> 00:03:36,890 That takes in text and then we may do something like items dot push. 55 00:03:37,780 --> 00:03:43,030 And pass in an object spread across text that's passed in. 56 00:03:43,030 --> 00:03:47,330 And then maybe we have a completed value set to false. 57 00:03:47,370 --> 00:03:47,740 Right. 58 00:03:47,740 --> 00:03:54,190 So we're directly editing what this item's variable holds. 59 00:03:54,220 --> 00:04:01,270 Now this looks fine, but it's updating the items array directly, which means that any other code that's 60 00:04:01,270 --> 00:04:05,680 reading from this array might not see the new item that was set. 61 00:04:05,680 --> 00:04:08,810 And this can lead to bugs that are very hard to track down. 62 00:04:08,830 --> 00:04:14,350 So Redux solves this by forcing us to update the state and the very specific way. 63 00:04:14,380 --> 00:04:17,829 Okay, We can't just update the state directly like I'm doing here. 64 00:04:17,829 --> 00:04:25,780 Instead, we have to dispatch an action which is an object that describes what state change we want 65 00:04:25,780 --> 00:04:26,410 to make. 66 00:04:26,440 --> 00:04:32,560 And then the Redux store will then run what's called a reducer function to figure out how to update 67 00:04:32,560 --> 00:04:34,930 that state based on the action. 68 00:04:34,930 --> 00:04:40,430 And this makes it harder to accidental update state in the wrong place. 69 00:04:40,450 --> 00:04:43,330 Now you're going to hear terms like action and reducer. 70 00:04:43,330 --> 00:04:45,910 And it might sound confusing at first, but don't worry. 71 00:04:45,940 --> 00:04:49,120 We're going to talk more about that as we move along. 72 00:04:49,660 --> 00:04:50,080 All right. 73 00:04:50,080 --> 00:04:58,930 So I would say in summary, state is it's held at the app level and it's updated through actions dispatched 74 00:04:58,930 --> 00:05:00,850 to a reducer function. 75 00:05:00,850 --> 00:05:07,420 And the updated state is sent down to any components that need it, ensuring that all parts of the app 76 00:05:07,450 --> 00:05:14,980 have access to the most up to date information rather than changing the the existing state. 77 00:05:15,610 --> 00:05:17,650 And I know that's a lot to take in. 78 00:05:17,650 --> 00:05:23,140 And most of the explanations of all of this are over complicated. 79 00:05:23,140 --> 00:05:25,420 In fact, if we look at Redux. 80 00:05:26,550 --> 00:05:30,650 Diagrams and we look at images. 81 00:05:30,660 --> 00:05:36,540 So yeah, a lot of this stuff is, is just over complicated and things that you don't really need to 82 00:05:36,540 --> 00:05:39,660 be here at this point if you're just learning this stuff. 83 00:05:39,660 --> 00:05:47,880 In fact, I think the best one is probably this because it's simple and it explains the overall picture. 84 00:05:47,880 --> 00:05:53,790 So basically you have your view, which is your your UI, all your React components and everything, 85 00:05:53,790 --> 00:05:58,740 and then you have your state and your state usually has some initial values that it sends down. 86 00:05:58,740 --> 00:06:00,900 So like our products, for example. 87 00:06:00,900 --> 00:06:06,360 And then if you want to change a piece of your state, like add a new product, then you'd have your, 88 00:06:06,660 --> 00:06:13,140 your form to, to create a new product and then you'd have an action that fires off with that new product 89 00:06:13,140 --> 00:06:14,430 as the payload. 90 00:06:14,430 --> 00:06:19,320 And then your action here, you would do your, your fetching. 91 00:06:19,320 --> 00:06:26,130 So if you're working with a back end API, you would fetch that data and then you'd have a reducer function 92 00:06:26,230 --> 00:06:28,120 that will then change the state. 93 00:06:28,120 --> 00:06:34,960 So it will add the new product and then it will get sent down not only to a single component but to 94 00:06:34,960 --> 00:06:40,990 your entire application so that anywhere that uses that product or those products, that's going to 95 00:06:40,990 --> 00:06:47,230 update and that's where, you know, so you don't run into the issues that I talked about where some 96 00:06:47,230 --> 00:06:49,270 parts might not get updated. 97 00:06:49,390 --> 00:06:49,750 All right. 98 00:06:49,750 --> 00:06:54,190 So hopefully that kind of just gives you a basic picture of how this works. 99 00:06:54,190 --> 00:06:58,630 If you've never done this, if you've worked with Redux, if you did the first version of this course, 100 00:06:58,630 --> 00:07:03,850 you probably understand the you know, you have a general understanding. 101 00:07:04,330 --> 00:07:04,810 All right. 102 00:07:04,810 --> 00:07:11,230 So yeah, in the next video, we're going to start to implement Redux and Redux Toolkit. 103 00:07:11,230 --> 00:07:13,150 So I will see you in the next one.