1 00:00:02,040 --> 00:00:03,210 Welcome back. 2 00:00:03,570 --> 00:00:10,610 Before we start learning about redux we need to talk about something called state management. 3 00:00:10,640 --> 00:00:12,440 We've heard this word before - state. 4 00:00:12,530 --> 00:00:13,050 Right. 5 00:00:13,190 --> 00:00:14,690 When building a react app. 6 00:00:14,720 --> 00:00:24,300 We had this.state and state described what our app should look like. If we remember this, well, 7 00:00:27,630 --> 00:00:36,750 react is simply a group of components that are rendered in a tree like structure. 8 00:00:36,840 --> 00:00:41,420 So this would be the app.js for example. 9 00:00:41,560 --> 00:00:48,390 And each one of these components would have state for example the red dots over here. 10 00:00:48,700 --> 00:00:49,750 They have state. 11 00:00:49,750 --> 00:00:57,730 So for example this app component will have a state of signed in as, and let's say the state is user 12 00:00:57,730 --> 00:01:06,340 in that case this user component might have a state of user "Mitch" or if signed in as 13 00:01:06,340 --> 00:01:14,200 is "Admin" it might render the admin component and any time you see the blue dot that means there was a 14 00:01:14,200 --> 00:01:21,340 change so if there's a change here it can update something into this component and we render. 15 00:01:21,640 --> 00:01:31,380 And we did this in react and I want you to think of State as memory. An app needs to remember things 16 00:01:31,440 --> 00:01:40,240 in order to work otherwise we would just have simple html web pages like before. 17 00:01:40,320 --> 00:01:43,340 Remember this Keiko Corp Web site. 18 00:01:43,490 --> 00:01:46,940 This really doesn't have any state, does it. 19 00:01:48,050 --> 00:01:57,230 Each time we show the exact same web page to whoever is using it. This page has no idea of who the user 20 00:01:57,230 --> 00:02:03,740 is or any interactions that I'm having - it's mainly just text. 21 00:02:03,810 --> 00:02:07,530 Now the RoboFriends app - that's different. 22 00:02:07,680 --> 00:02:08,880 It has state. 23 00:02:09,330 --> 00:02:14,880 Well mostly because we wrote it and we had the this.state but we can interact with it. 24 00:02:14,940 --> 00:02:16,450 I can type in here. 25 00:02:17,400 --> 00:02:25,360 Leanne and I have a state of the search box having L-E-A in it. 26 00:02:25,560 --> 00:02:36,650 And the robots being filtered with just Leanne. State describes how our app should look. Our app, our Robo- 27 00:02:36,650 --> 00:02:46,520 friends app right now should look like this with just one robot card because the state is of a search 28 00:02:46,520 --> 00:02:50,540 box having the letters L-E-A inside of it. 29 00:02:51,570 --> 00:03:00,660 Now with a simple app like the robo friends ap0,p state it was pretty easy to understand, but state management 30 00:03:00,900 --> 00:03:02,780 is a really hard problem 31 00:03:02,880 --> 00:03:10,340 as our apps get bigger and bigger, and bigger. And you'll actually see in the later part of the course when 32 00:03:10,340 --> 00:03:15,180 we start working on the smart brain app which does the image recognition. 33 00:03:16,720 --> 00:03:24,430 You'll notice how the state gets more and more complicated and your head starts to hurt because you 34 00:03:24,430 --> 00:03:26,770 have to keep track of all these things happening. 35 00:03:28,180 --> 00:03:35,380 So again, with a simple react app we can have nice views and maybe have different states and different 36 00:03:35,380 --> 00:03:39,680 components but eventually as our app gets bigger. 37 00:03:39,760 --> 00:03:49,150 We end up with something like this where we have more and more components more and more state within 38 00:03:49,150 --> 00:03:55,540 that component or we can have one massive state at the very top here which also gets pretty hard and 39 00:03:55,960 --> 00:03:59,090 all these blue dots, as they update, 40 00:03:59,110 --> 00:04:04,180 they also have to update the state and then re-render. 41 00:04:04,380 --> 00:04:11,070 And this example here is just a little diagram but you can see with all these arrows how confusing it's 42 00:04:11,070 --> 00:04:17,519 going to get and keeping track of all this state is really, really hard. 43 00:04:17,550 --> 00:04:23,060 So we need some form of a state management, and redux. 44 00:04:23,060 --> 00:04:25,070 solves this problem for us. 45 00:04:25,070 --> 00:04:32,210 How could we make this diagram simpler and make things easier to understand in our heads as developers? 46 00:04:32,870 --> 00:04:35,060 Redux came up with a novel concept. 47 00:04:36,470 --> 00:04:39,750 What if we just remove all the state, 48 00:04:39,980 --> 00:04:43,050 so this.state from all the components? 49 00:04:43,220 --> 00:04:45,390 What if we just have props. 50 00:04:45,620 --> 00:04:49,650 So all these components just have props being passed down. 51 00:04:50,000 --> 00:05:00,150 And now the state, we keep it in a store. And a store is simply just the state which is this.state 52 00:05:00,180 --> 00:05:01,700 that react had. 53 00:05:01,860 --> 00:05:05,960 But in one massive object just like you see here. 54 00:05:06,120 --> 00:05:14,940 So one single object that describes how our app should look and all we do is just pass down that state 55 00:05:15,300 --> 00:05:18,840 to whichever component needs it as props. 56 00:05:19,750 --> 00:05:30,070 So our diagram from looking like this with just react can go to looking like this with redux where none 57 00:05:30,070 --> 00:05:32,690 of the components need to hold state anymore. 58 00:05:32,860 --> 00:05:41,020 And we can have one massive object that describes our entire app and whichever component needs that 59 00:05:41,020 --> 00:05:43,440 prop can just be passed down to it. 60 00:05:44,320 --> 00:05:51,670 And any updates that happen go through the state, the state gets modified and then we pass down that 61 00:05:51,670 --> 00:05:59,800 information to the component. This diagram might be confusing without actually coding anything. 62 00:05:59,900 --> 00:06:01,010 And we'll come back to it, 63 00:06:01,010 --> 00:06:02,780 so this makes sense. 64 00:06:02,990 --> 00:06:11,230 But even just visually you can see that this diagram looks a lot simpler than the diagram before it. 65 00:06:11,240 --> 00:06:15,630 We have a lot less arrows and everything just flows nicer. 66 00:06:15,680 --> 00:06:20,910 So as we go through the videos you're going to get more and more familiar with this idea of state management. 67 00:06:20,930 --> 00:06:28,430 But I wanted to keep in mind that, that is what redux is solving. Redux is a library that makes state 68 00:06:28,430 --> 00:06:34,100 management easier, not only for reac but for any tools that we use. 69 00:06:34,220 --> 00:06:36,810 It just happens to work really really well with react. 70 00:06:37,400 --> 00:06:44,870 And redux actually got inspiration from database design. From things such as events sourcing or CQRS 71 00:06:45,230 --> 00:06:49,400 which you can read up more on. Databases had the same problem. 72 00:06:49,520 --> 00:06:57,530 All these updates and all these changes happened but we needed a way to make sure that all these changes 73 00:06:57,890 --> 00:07:00,950 are organized in a nice cohesive way. 74 00:07:02,120 --> 00:07:02,730 All right. 75 00:07:02,860 --> 00:07:08,580 Well let's get into the next video and get a little bit deeper with redux. 76 00:07:08,690 --> 00:07:09,680 I'll see you in the next one. Bye bye.