1 00:00:00,810 --> 00:00:05,460 In the last section we set up our boilerplate project and install dependencies for it. 2 00:00:05,490 --> 00:00:11,190 I took the liberty of running NPM start just to build our package here and I opened it up in the browser 3 00:00:11,190 --> 00:00:16,080 and visited localhost 80 80 just to make sure that everything is still working and it looks like it 4 00:00:16,080 --> 00:00:17,370 is just fine. 5 00:00:17,940 --> 00:00:24,090 So with our default project set up here let's talk about one of the core topics behind redux which is 6 00:00:24,360 --> 00:00:25,460 reducers. 7 00:00:25,790 --> 00:00:30,710 So the redux contains a lot of pretty fancy sounding terminology like reducers. 8 00:00:30,780 --> 00:00:36,150 So let's just you know cut the fancy language here and use plain simple English to explain what it is 9 00:00:36,140 --> 00:00:36,460 . 10 00:00:36,720 --> 00:00:41,920 A producer is a function that returns a piece of the application state. 11 00:00:41,970 --> 00:00:42,540 That's it. 12 00:00:42,570 --> 00:00:49,410 It's just a function that returns a piece of the application state because our state can have because 13 00:00:49,410 --> 00:00:52,720 our application can have many different pieces of state. 14 00:00:52,740 --> 00:00:55,010 We can have many different reducers. 15 00:00:55,230 --> 00:00:59,370 So let's think about our book app diagram here. 16 00:00:59,760 --> 00:01:08,040 Our application state has two pieces the list of books and the currently selected books book so we can 17 00:01:08,040 --> 00:01:13,960 have two different reducers for this one Radu serve would be responsible for producing the list of books 18 00:01:13,970 --> 00:01:14,280 . 19 00:01:14,460 --> 00:01:19,340 And the other would be responsible for producing the currently selected book. 20 00:01:19,470 --> 00:01:25,010 Just to reiterate again that our application state is a plain javascript object. 21 00:01:25,140 --> 00:01:28,500 Let's look at a slightly different diagram. 22 00:01:28,530 --> 00:01:35,610 So again here is our application state represented by this big overall object and it has two keys. 23 00:01:35,670 --> 00:01:40,410 Two pieces of state books an active book. 24 00:01:40,890 --> 00:01:49,740 The books piece of state will be produced by one reducer called the book's reducer and the active book 25 00:01:49,740 --> 00:01:55,180 piece of state is produced by another producer called the active book producer. 26 00:01:55,530 --> 00:02:02,630 So again reducers produce the value of our state. 27 00:02:02,880 --> 00:02:04,970 The keys can really be whatever you want. 28 00:02:04,980 --> 00:02:11,320 You know instead of saying books this could be books list or you know library books or whatever. 29 00:02:11,400 --> 00:02:15,960 All that really matters or the only thing that the producer is really concerned about is the value of 30 00:02:15,960 --> 00:02:22,030 the state here in general we have again just to reiterate we have got a one to one pairing here. 31 00:02:22,080 --> 00:02:28,800 So Key of state value of state where value of state is produced by the book's producer. 32 00:02:29,540 --> 00:02:34,530 OK so enough diagrams Let's give a shot at writing our books reducer. 33 00:02:35,040 --> 00:02:37,160 So think about what we're going to do here. 34 00:02:37,440 --> 00:02:42,540 We're going to write a function that produces the value of our state. 35 00:02:42,600 --> 00:02:48,630 So it's really at the end of the day just produce an array of objects where each object is just the 36 00:02:48,630 --> 00:02:57,060 title of a book then the value of that reducer or you know that that function should be assigned to 37 00:02:57,060 --> 00:02:59,540 the key books on our state. 38 00:02:59,550 --> 00:03:01,960 So let's give this a shot. 39 00:03:02,070 --> 00:03:07,560 I mean my code editor here and inside the source directory are going to find the reducers directory 40 00:03:07,710 --> 00:03:13,980 and inside of there I'm going to make a new file called reducer underscore books. 41 00:03:13,980 --> 00:03:21,670 JS in redux apps I really like prepending the name of a lot of files with the type of file it is. 42 00:03:21,900 --> 00:03:26,080 Even though you know it's already in the reducers folder obviously it's got to be a reducer. 43 00:03:26,160 --> 00:03:31,290 But the reality is that once we've got a lot of different you know we've got an application and it's 44 00:03:31,290 --> 00:03:32,530 working with books. 45 00:03:32,580 --> 00:03:36,950 We might end up with a lot of different files that you know have the word books in the title. 46 00:03:37,140 --> 00:03:42,300 So I find it to be a lot easier to kind of narrow down the file I'm searching for by prigged pending 47 00:03:42,300 --> 00:03:43,810 the type of file it is like so. 48 00:03:43,920 --> 00:03:47,210 But this is still it's on you know totally my personal convention. 49 00:03:47,220 --> 00:03:49,120 It's up to you if you want to call it books. 50 00:03:49,150 --> 00:03:51,280 Totally fine up to you. 51 00:03:52,140 --> 00:03:52,880 OK. 52 00:03:53,220 --> 00:03:56,170 So let's start off by just writing our simple function. 53 00:03:56,190 --> 00:04:06,600 That's just going to return an array of books will say function and will return an array and these will 54 00:04:06,600 --> 00:04:09,130 be a couple of different books. 55 00:04:09,210 --> 00:04:12,810 I'm just going to copy paste here to save a little time. 56 00:04:13,020 --> 00:04:14,220 We've got four books 57 00:04:16,950 --> 00:04:20,940 and the first title will say javascript. 58 00:04:20,950 --> 00:04:25,670 The good parts say Harry Potter. 59 00:04:25,800 --> 00:04:34,600 I know it's not really a title but a well Dark Tower and ello ello Quint. 60 00:04:34,880 --> 00:04:35,950 Groovy. 61 00:04:36,670 --> 00:04:38,920 OK so here's our reducer. 62 00:04:39,120 --> 00:04:44,650 Just a function and returns a piece of our application state a list of books. 63 00:04:44,940 --> 00:04:50,760 Now to make use of this reducer anywhere else within our project we need to make sure that we export 64 00:04:50,760 --> 00:04:52,140 this function. 65 00:04:52,140 --> 00:04:55,620 So before the function will write X for default. 66 00:04:56,160 --> 00:05:02,160 Now any other file inside of our project can import this file and it will just automatically receive 67 00:05:02,580 --> 00:05:06,560 the books reducer. 68 00:05:06,750 --> 00:05:07,220 All right. 69 00:05:07,260 --> 00:05:12,930 So a reducer is really created on our application is really a two step process. 70 00:05:12,930 --> 00:05:15,360 Step one is to actually create the reducer. 71 00:05:15,360 --> 00:05:20,760 Step two is to wire into our application so just you know obviously writing a function here doesn't 72 00:05:20,760 --> 00:05:22,740 really wire anything up for us. 73 00:05:22,740 --> 00:05:25,370 It's only half a game. 74 00:05:25,590 --> 00:05:28,550 So Step two is to wire up to our application. 75 00:05:28,560 --> 00:05:30,320 We'll do this inside of index. 76 00:05:30,330 --> 00:05:31,290 JS. 77 00:05:31,320 --> 00:05:37,500 So I'm going to open up index dot J us and once inside of here as a part of the boiler plate project 78 00:05:37,500 --> 00:05:44,100 we've already got this value inside of here where state is no state state state where it's going to 79 00:05:44,100 --> 00:05:47,890 go ahead and delete this out of here like so. 80 00:05:49,230 --> 00:05:51,620 So let's look back at our diagram here. 81 00:05:51,630 --> 00:05:53,520 Real quick. 82 00:05:53,520 --> 00:06:01,340 We've got a key of books and the value is the output of the books reducer. 83 00:06:01,800 --> 00:06:06,000 The way that we're set up right here with this function called combine reducers. 84 00:06:06,000 --> 00:06:08,730 This is really the mapping of our state right here. 85 00:06:08,730 --> 00:06:18,220 So if we say books is books reducer like so that's what gives us loops. 86 00:06:18,570 --> 00:06:20,280 The same kind of mapping. 87 00:06:20,280 --> 00:06:27,930 So we've got books and the value is the books reducer right here. 88 00:06:27,930 --> 00:06:29,090 There is a lot of code in here. 89 00:06:29,100 --> 00:06:34,410 You know the combined reducers from redox And this route reducer and all is kind of what not in here 90 00:06:34,410 --> 00:06:34,770 . 91 00:06:34,770 --> 00:06:36,260 We're definitely in a run through this. 92 00:06:36,300 --> 00:06:40,830 But for this first example we're just going to kind of glaze over it a little bit so we can get a taste 93 00:06:40,830 --> 00:06:45,930 of how reducers work in general and we're definitely in to come back to here in the future section and 94 00:06:45,930 --> 00:06:52,270 make sure we explain this combined reducers function at length before we go any farther. 95 00:06:52,290 --> 00:06:56,270 We do have to import the books reducer into this file as well. 96 00:06:56,280 --> 00:07:00,750 I'm actually going to capitalize books reducers well so we got capital B. 97 00:07:00,780 --> 00:07:04,210 Books capital are reducer. 98 00:07:04,290 --> 00:07:17,410 Then we'll import books reducer from the current directory so we'll use dot slash reducer books. 99 00:07:18,450 --> 00:07:19,540 Cool. 100 00:07:19,680 --> 00:07:21,050 This looks good. 101 00:07:21,690 --> 00:07:26,650 OK so that's a incredibly a lot of talking for a tiny amount of code. 102 00:07:26,650 --> 00:07:32,430 Right we got a reducers some key for it is just an object blah blah blah something something function 103 00:07:32,510 --> 00:07:33,060 . 104 00:07:33,510 --> 00:07:35,580 And heck how do we even test this right. 105 00:07:35,580 --> 00:07:38,180 How would we know if we're going down the right path here. 106 00:07:38,220 --> 00:07:39,140 Good question. 107 00:07:39,420 --> 00:07:42,850 Let's go ahead and answer that in the next section.