1 00:00:00,730 --> 00:00:06,540 In the last section we discussed an imaginary application that shows a bunch of books we modeled the 2 00:00:06,540 --> 00:00:08,950 application using this diagram right here. 3 00:00:09,360 --> 00:00:11,240 So where does redux come into this. 4 00:00:11,270 --> 00:00:14,640 And for that matter what part does re-act play at all. 5 00:00:14,660 --> 00:00:21,660 Redux is the data contained inside this application box whereas re-act is really the views contained 6 00:00:21,660 --> 00:00:27,130 inside the application box when redux describes itself as a state container. 7 00:00:27,240 --> 00:00:34,380 It really means a collection of all the data that describes the app that not only includes the hard 8 00:00:34,380 --> 00:00:41,340 data like the list of books but it also includes more metal level properties like what is the currently 9 00:00:41,340 --> 00:00:50,190 selected book react on the other hand represents the views which translates the app's data into something 10 00:00:50,190 --> 00:00:55,850 that can be displayed on the screen as something that the user can actually interact with. 11 00:00:55,990 --> 00:01:00,150 Now you might you thinking OK well you know this doesn't really look that much different from angular 12 00:01:00,150 --> 00:01:01,720 backbone or even flux right. 13 00:01:01,720 --> 00:01:07,230 What's what's the difference here the difference here is that we centralize all of the applications 14 00:01:07,230 --> 00:01:11,240 data inside of a single object. 15 00:01:11,490 --> 00:01:15,980 When you have any other javascript library you always have separate collections of data on you know 16 00:01:15,990 --> 00:01:20,130 backbone has collections Flugge says different stores. 17 00:01:20,200 --> 00:01:22,210 Angular has whatever and ular does. 18 00:01:22,210 --> 00:01:28,830 I'm not really an angular guy redux on the other hand centralizes all of this data into a central single 19 00:01:28,830 --> 00:01:32,520 object which referred to as the state. 20 00:01:32,520 --> 00:01:37,140 And remember a couple of seconds ago I tried to make a distinction between component level state and 21 00:01:37,140 --> 00:01:40,530 redux state when we talked about state with redox. 22 00:01:40,530 --> 00:01:43,130 We're talking about application level state. 23 00:01:43,290 --> 00:01:45,000 So it's the application as a whole. 24 00:01:45,000 --> 00:01:51,010 It's this global it's this big object that contains all the data of our application. 25 00:01:51,120 --> 00:01:53,110 So let's look at two more examples of redux. 26 00:01:53,130 --> 00:01:57,120 One simple and a one a little more complex. 27 00:01:57,120 --> 00:02:07,140 The first one is likely to be the most common example when describing flock's a counter. 28 00:02:07,140 --> 00:02:09,990 So here's a mock up of a counter application. 29 00:02:09,990 --> 00:02:11,330 The app is incredibly simple. 30 00:02:11,340 --> 00:02:14,650 Right at the bottom is a counter that starts at zero. 31 00:02:14,760 --> 00:02:18,380 And when the user presses the plus button the number goes up by one. 32 00:02:18,420 --> 00:02:19,830 And then when they click the Midas button. 33 00:02:19,860 --> 00:02:23,350 Well you could probably guess it goes down by one. 34 00:02:23,520 --> 00:02:28,830 In this example we are a three is displayed you can imagine that the user presses the plus button three 35 00:02:28,830 --> 00:02:29,420 times. 36 00:02:29,450 --> 00:02:31,110 You know simple enough. 37 00:02:31,140 --> 00:02:38,340 Now ask yourself if you had to make a diagram that separated the app into two camps where one box showed 38 00:02:38,340 --> 00:02:43,670 all the different types of data and one showed all the different types of views what might it look like 39 00:02:43,670 --> 00:02:44,000 here. 40 00:02:44,010 --> 00:02:45,580 It is a pretty simple example. 41 00:02:45,750 --> 00:02:46,620 But we made it look like 42 00:02:49,590 --> 00:02:52,650 here's one possible interpretation. 43 00:02:52,650 --> 00:02:59,520 The only piece of data flowing around in the app is the current count excuse me the current count. 44 00:02:59,730 --> 00:03:05,210 On the other side the view side there is just to the plus and minus button. 45 00:03:05,610 --> 00:03:09,930 Perhaps you know the number changer over here and the view that shows the current count which is maybe 46 00:03:09,930 --> 00:03:13,040 you know a current count component whatever. 47 00:03:13,240 --> 00:03:16,230 Sorry to be in charge of showing the two views. 48 00:03:16,230 --> 00:03:17,360 The two components. 49 00:03:17,700 --> 00:03:22,120 Whereas Reebok's was keeping track of the current state of the counter. 50 00:03:22,340 --> 00:03:27,230 It's what's keeping track of the actual number the actual number of times that the button has been pressed 51 00:03:27,230 --> 00:03:27,930 . 52 00:03:28,380 --> 00:03:34,530 Remember read x contains the state of the application or the data that tells our components how or what 53 00:03:34,530 --> 00:03:35,910 they should render. 54 00:03:36,490 --> 00:03:41,340 OK let's do one more example of this data modeling in the next section and then start tackling a real 55 00:03:41,340 --> 00:03:42,240 world example.