1 00:00:00,830 --> 00:00:05,400 OK so you've heard about redux your friends have told you that it's the new hot javascript framework 2 00:00:05,440 --> 00:00:09,560 and any want to learn it but what the heck is it in the first place right. 3 00:00:09,570 --> 00:00:10,620 What does it do for us. 4 00:00:10,620 --> 00:00:15,390 To it bring to the table that's so different from backbone angular or any other off the shelf javascript 5 00:00:15,390 --> 00:00:16,260 framework. 6 00:00:16,500 --> 00:00:21,460 In this section we're going to talk about what redux is and what we gain by using it. 7 00:00:21,780 --> 00:00:27,870 Redux his own home pay own home page says that redox is a predictable state container for javascript 8 00:00:27,870 --> 00:00:29,470 applications. 9 00:00:29,920 --> 00:00:31,120 Or I don't know about you. 10 00:00:31,170 --> 00:00:36,300 I don't consider myself very dumb but the first dozen times or so that I read that line I had just absolutely 11 00:00:36,300 --> 00:00:37,830 no idea what it meant. 12 00:00:38,130 --> 00:00:43,860 So we're going to try to figure out what that means by looking at an example and to pull up a diagram 13 00:00:43,860 --> 00:00:46,030 here really quick. 14 00:00:47,550 --> 00:00:51,110 Let's consider a traditional javascript application. 15 00:00:51,420 --> 00:00:56,520 Let's say that we're making an app that displays a list of books and it can show a list of books over 16 00:00:56,520 --> 00:00:58,050 here on the left hand side. 17 00:00:58,530 --> 00:01:03,150 When a user clicks on a book it will show details about that book to the user. 18 00:01:03,150 --> 00:01:06,540 So in this case it's going to show book number three. 19 00:01:06,630 --> 00:01:10,830 You know we can assume that the user clicked on book number three here in the C book there were three 20 00:01:10,830 --> 00:01:11,730 at the top. 21 00:01:11,760 --> 00:01:16,780 They have an author number of pages and genre for that particular book. 22 00:01:16,830 --> 00:01:18,830 So this app is simple enough right. 23 00:01:18,840 --> 00:01:22,910 When I click on another book it should show me details of that other one. 24 00:01:23,340 --> 00:01:23,970 Right. 25 00:01:23,970 --> 00:01:26,250 Simple enough behavior is nothing crazy. 26 00:01:26,640 --> 00:01:33,350 Let's take a second though and consider the structure of the application both on the View layer. 27 00:01:33,360 --> 00:01:37,440 You know what we visually see in on the data layer as well. 28 00:01:37,440 --> 00:01:43,900 So I get to pull up another diagram here. 29 00:01:46,620 --> 00:01:51,450 If you think about it the app is really divided into two separate parts. 30 00:01:51,570 --> 00:01:56,250 The data that powers the app and the views that display that data. 31 00:01:56,680 --> 00:02:02,040 There's two types of data that make that app work a list of books which are displayed on the sidebar 32 00:02:02,430 --> 00:02:08,460 and a currently selected book which is displayed in the detail view on the View side we have a list 33 00:02:08,460 --> 00:02:14,130 view a list item and a detail view the detail view just like the app which is put together shows a detail 34 00:02:14,130 --> 00:02:17,610 about the currently selected book. 35 00:02:17,610 --> 00:02:22,830 So with this diagram put together I want you to keep in mind here where I'm trying to really convey 36 00:02:22,830 --> 00:02:28,860 here is that we want to try to separate the views in our application from the data in our application 37 00:02:28,860 --> 00:02:29,310 . 38 00:02:29,310 --> 00:02:32,230 The data is really sitting over here in its own separate bucket. 39 00:02:32,310 --> 00:02:33,530 Right. 40 00:02:33,720 --> 00:02:38,180 The two of them come together to make an actual working usable application. 41 00:02:38,710 --> 00:02:39,150 OK. 42 00:02:39,200 --> 00:02:42,330 So this might seem all esoteric but bear with me for a little bit. 43 00:02:42,450 --> 00:02:44,610 And let's continue in the next section.