1
00:00:00,870 --> 00:00:05,820
In the last section we went through the process of designing the different reducers inside our application

2
00:00:05,910 --> 00:00:11,550
and we ended up deciding on having two separate reducers a producer that's going in turn our list of

3
00:00:11,550 --> 00:00:17,160
libraries or so to the user and a selection reducer which is going to keep track of the currently expanded

4
00:00:17,190 --> 00:00:20,800
or kind of selected reduce or library excuse me.

5
00:00:21,450 --> 00:00:25,740
So in this section we're going to work on the design of our library reducer.

6
00:00:26,010 --> 00:00:32,730
So we need to create a new reducer and it should always return a very static list of libraries to show

7
00:00:32,730 --> 00:00:34,050
to our user.

8
00:00:34,200 --> 00:00:40,400
So that's our goal you know flip back over to our reducers index file.

9
00:00:40,770 --> 00:00:45,050
Remember inside of here right now we've got that single dummy reducer.

10
00:00:45,060 --> 00:00:52,200
By convention we usually locate one reduce or in one file so like a one to one mapping just the same

11
00:00:52,200 --> 00:00:54,250
way as we have with our components.

12
00:00:54,270 --> 00:00:59,550
So inside of my reducers directory I will make a new file that is going to house all the code having

13
00:00:59,550 --> 00:01:01,620
to do with our library reducer.

14
00:01:01,920 --> 00:01:08,570
So I will make a new file and the reducers folder and I'm going to call it library reducer.

15
00:01:08,670 --> 00:01:10,360
Yes.

16
00:01:10,950 --> 00:01:12,260
And then inside of here.

17
00:01:12,330 --> 00:01:16,030
Right now I'm just going to put in some boilerplate.

18
00:01:16,260 --> 00:01:20,280
So a very again simple reducer whenever it runs.

19
00:01:20,310 --> 00:01:23,300
Always return an array.

20
00:01:23,670 --> 00:01:26,530
Am I going to flip back over to the indexed on J.S. file.

21
00:01:26,530 --> 00:01:29,600
I'm going to wire it up to the rest of my application here.

22
00:01:29,670 --> 00:01:33,100
So remember the very overriding theme of redux.

23
00:01:33,150 --> 00:01:35,180
Nothing is done automatically for you.

24
00:01:35,220 --> 00:01:35,520
Right.

25
00:01:35,530 --> 00:01:41,640
And like just making a function inside of a file call library reduce or does not do anything we have

26
00:01:41,640 --> 00:01:43,370
to very explicitly wired up.

27
00:01:43,390 --> 00:01:44,100
OK.

28
00:01:44,760 --> 00:01:57,360
So inside of this index Jasc file import library reducer from library reducer and then instead of using

29
00:01:57,360 --> 00:02:03,180
a very simple dummy function right here we will say library reducer.

30
00:02:03,840 --> 00:02:04,600
OK.

31
00:02:04,890 --> 00:02:12,050
So just a quick reminder and we're going to just really really drive this home at this point next point

32
00:02:12,060 --> 00:02:17,280
home to you in the coming sections here because it's one of the what I think is the most confusing points

33
00:02:17,280 --> 00:02:21,660
of redux and maybe because maybe because I'm going to make such a big deal about it maybe it won't be

34
00:02:21,660 --> 00:02:23,450
quite as confusing but you know whatever.

35
00:02:23,450 --> 00:02:25,670
Let's just go through it.

36
00:02:25,800 --> 00:02:31,380
We have said many times that reducers produce our application state right.

37
00:02:31,380 --> 00:02:36,410
A producer runs it returns a value and boom that is our application state.

38
00:02:36,420 --> 00:02:41,250
Now we might have many different reducers inside of our application and we need to somehow get them

39
00:02:41,280 --> 00:02:42,960
all to work together properly.

40
00:02:42,960 --> 00:02:46,400
And so that's why we introduced this combined reducers call right.

41
00:02:46,470 --> 00:02:52,080
I said this is the thing that makes multiple reducers work together nicely.

42
00:02:52,080 --> 00:02:56,910
So the thing that I really want to point out to you here and again I will just harp on this repeatedly.

43
00:02:56,910 --> 00:03:04,230
We now have one douceur called the library reducer inside of my combine reducers call.

44
00:03:04,230 --> 00:03:11,560
I assigned this reducer to a key called libraries of libraries right here like supersession that likes

45
00:03:11,580 --> 00:03:17,910
just stare at that word libraries because I assigned the library reducer to this library's key right

46
00:03:17,910 --> 00:03:18,720
now.

47
00:03:19,050 --> 00:03:25,230
If I ever conc a log my state objects like you know Konst a log store that get state which we had done

48
00:03:25,230 --> 00:03:27,020
several times previously.

49
00:03:27,240 --> 00:03:35,090
I would expect the response to be or the result the console log to the libraries is an empty array.

50
00:03:35,460 --> 00:03:41,040
OK so our library reducer right now always always returns an empty array.

51
00:03:41,270 --> 00:03:48,660
And because I assigned that reducer to a key of libraries my application state will now be an object

52
00:03:48,960 --> 00:03:54,020
that has the key libraries with a value of whatever got returned from that reducers.

53
00:03:54,030 --> 00:03:59,940
So again like the whole point here is because I signed library reducer two libraries key my application

54
00:03:59,940 --> 00:04:02,370
state has a key of libraries.

55
00:04:02,370 --> 00:04:02,970
That's it.

56
00:04:02,970 --> 00:04:03,330
That's it.

57
00:04:03,330 --> 00:04:05,580
I know a lot of talking just to convey that point.

58
00:04:05,760 --> 00:04:11,040
But again this is something that I have found can be very very confusing and once we start making use

59
00:04:11,040 --> 00:04:16,650
of our state objects and practice again I will come back and harp on this some more because I'm sure

60
00:04:16,650 --> 00:04:21,160
you love being I'm sure you love being lectured endlessly right.

61
00:04:21,180 --> 00:04:22,690
All right now I'm just kidding.

62
00:04:23,120 --> 00:04:23,420
OK.

63
00:04:23,430 --> 00:04:25,520
So here's our library producer again right now.

64
00:04:25,520 --> 00:04:27,910
Very simple very straightforward not really doing anything.

65
00:04:28,050 --> 00:04:33,750
But we wanted to return our list of libraries like the list of all the data showed to our user and we

66
00:04:33,750 --> 00:04:40,470
agreed or maybe I just dictated one or the other that the data structure for this list of libraries

67
00:04:40,530 --> 00:04:46,860
should be an array of objects where each object represents one single library.

68
00:04:46,860 --> 00:04:52,260
So what I want to do now is I want to say instead of returning just a completely empty array I want

69
00:04:52,260 --> 00:04:57,480
to return a list of objects that is going to represent all the different libraries to show to the user.

70
00:04:57,670 --> 00:04:59,000
OK that's it.

71
00:04:59,980 --> 00:05:06,010
So rather than kind of you know inside this reduce or typing out all these different libraries to show

72
00:05:06,010 --> 00:05:09,540
to the user just to keep this reducer nice and clean.

73
00:05:09,610 --> 00:05:14,020
I'm going to make a separate file to How's this list of libraries because I expect there's going to

74
00:05:14,020 --> 00:05:15,190
be many of them.

75
00:05:15,200 --> 00:05:18,520
I want to show so inside of my reducers directory.

76
00:05:18,520 --> 00:05:24,710
I'm going to make a new file called library list dot Jaison.

77
00:05:24,730 --> 00:05:26,510
Take special note of the file extension.

78
00:05:26,510 --> 00:05:27,580
Here it is Jason.

79
00:05:27,640 --> 00:05:28,480
It is not.

80
00:05:28,540 --> 00:05:29,600
Yes.

81
00:05:30,160 --> 00:05:37,020
So this Jason fall right here is going to be a dumb day dummy data file like just going to have data.

82
00:05:37,060 --> 00:05:41,460
It is a Jaison file which means I should place Jason data in here.

83
00:05:41,470 --> 00:05:43,150
It is not a javascript file.

84
00:05:43,150 --> 00:05:51,850
I cannot locate javascript code inside of here so I can place an array in here and then an object inside

85
00:05:51,850 --> 00:05:52,700
this object.

86
00:05:52,720 --> 00:05:57,260
I will put all the properties I need for my my library.

87
00:05:57,280 --> 00:06:00,040
So again keep in mind this is just one data.

88
00:06:00,040 --> 00:06:04,630
It is not javascript so I do not have to use an export statement here at all.

89
00:06:04,780 --> 00:06:05,770
Just have to put Jason.

90
00:06:05,780 --> 00:06:08,150
That's it.

91
00:06:08,280 --> 00:06:14,140
OK now I have already created a big list of libraries that I am going to copy paste into this file right

92
00:06:14,140 --> 00:06:19,810
here so I'm going to flip over to this code editor over here where I just had this data file already

93
00:06:19,810 --> 00:06:25,030
located and paste it all and I'm doing this intentionally very quickly because I don't want to have

94
00:06:25,030 --> 00:06:28,670
to go through all this typing of all this these different libraries in here.

95
00:06:28,710 --> 00:06:33,220
So in the next section the next section that you're going to see inside this course you're going to

96
00:06:33,220 --> 00:06:37,540
have some amount it's going to be basically like a text section and it's going to have the contents

97
00:06:37,540 --> 00:06:43,130
of this file right here so you can just go ahead copy paste it and paste it into this library.

98
00:06:43,170 --> 00:06:45,280
JS on file.

99
00:06:45,280 --> 00:06:50,980
One thing I want to point out here is that because it is a JS ON FILE all values are all string values

100
00:06:51,110 --> 00:06:57,760
text values have to be wrapped with double quotes so absolutely feel free to change the value of any

101
00:06:57,760 --> 00:07:01,730
of these libraries right if you want to add some to the end of your list.

102
00:07:01,900 --> 00:07:05,180
Or you want to use completely different titles or different descriptions.

103
00:07:05,200 --> 00:07:08,320
Absolutely feel free to modify this as much as you want.

104
00:07:08,350 --> 00:07:12,700
Just make sure that any modifications you make both the key and the value have to be wrapped with double

105
00:07:12,700 --> 00:07:13,760
quotes.

106
00:07:14,140 --> 00:07:16,420
So unless you are going to do.

107
00:07:16,670 --> 00:07:17,150
Again.

108
00:07:17,230 --> 00:07:17,680
Well you know what.

109
00:07:17,680 --> 00:07:18,160
Tell you what.

110
00:07:18,190 --> 00:07:19,850
How about let's take a quick pause.

111
00:07:19,930 --> 00:07:25,060
I'll let you copy paste this file ope over and then we will actually make use of it inside this reducer.

112
00:07:25,300 --> 00:07:27,100
So again take a quick break.

113
00:07:27,130 --> 00:07:30,900
Cut Paste the stuff in here and we will return and make use of it.