In the last section we set up our boilerplate project and install dependencies for it. 2
I took the liberty of running NPM start just to build our package here and I opened it up in the browser 3
and visited localhost 80 80 just to make sure that everything is still working and it looks like it 4
is just fine. 5
So with our default project set up here let's talk about one of the core topics behind redux which is 6
reducers. 7
So the redux contains a lot of pretty fancy sounding terminology like reducers. 8
So let's just you know cut the fancy language here and use plain simple English to explain what it is 9
. 10
A producer is a function that returns a piece of the application state. 11
That's it. 12
It's just a function that returns a piece of the application state because our state can have because 13
our application can have many different pieces of state. 14
We can have many different reducers. 15
So let's think about our book app diagram here. 16
Our application state has two pieces the list of books and the currently selected books book so we can 17
have two different reducers for this one Radu serve would be responsible for producing the list of books 18
. 19
And the other would be responsible for producing the currently selected book. 20
Just to reiterate again that our application state is a plain javascript object. 21
Let's look at a slightly different diagram. 22
So again here is our application state represented by this big overall object and it has two keys. 23
Two pieces of state books an active book. 24
The books piece of state will be produced by one reducer called the book's reducer and the active book 25
piece of state is produced by another producer called the active book producer. 26
So again reducers produce the value of our state. 27
The keys can really be whatever you want. 28
You know instead of saying books this could be books list or you know library books or whatever. 29
All that really matters or the only thing that the producer is really concerned about is the value of 30
the state here in general we have again just to reiterate we have got a one to one pairing here. 31
So Key of state value of state where value of state is produced by the book's producer. 32
OK so enough diagrams Let's give a shot at writing our books reducer. 33
So think about what we're going to do here. 34
We're going to write a function that produces the value of our state. 35
So it's really at the end of the day just produce an array of objects where each object is just the 36
title of a book then the value of that reducer or you know that that function should be assigned to 37
the key books on our state. 38
So let's give this a shot. 39
I mean my code editor here and inside the source directory are going to find the reducers directory 40
and inside of there I'm going to make a new file called reducer underscore books. 41
JS in redux apps I really like prepending the name of a lot of files with the type of file it is. 42
Even though you know it's already in the reducers folder obviously it's got to be a reducer. 43
But the reality is that once we've got a lot of different you know we've got an application and it's 44
working with books. 45
We might end up with a lot of different files that you know have the word books in the title. 46
So I find it to be a lot easier to kind of narrow down the file I'm searching for by prigged pending 47
the type of file it is like so. 48
But this is still it's on you know totally my personal convention. 49
It's up to you if you want to call it books. 50
Totally fine up to you. 51
OK. 52
So let's start off by just writing our simple function. 53
That's just going to return an array of books will say function and will return an array and these will 54
be a couple of different books. 55
I'm just going to copy paste here to save a little time. 56
We've got four books 57
and the first title will say javascript. 58
The good parts say Harry Potter. 59
I know it's not really a title but a well Dark Tower and ello ello Quint. 60
Groovy. 61
OK so here's our reducer. 62
Just a function and returns a piece of our application state a list of books. 63
Now to make use of this reducer anywhere else within our project we need to make sure that we export 64
this function. 65
So before the function will write X for default. 66
Now any other file inside of our project can import this file and it will just automatically receive 67
the books reducer. 68
All right. 69
So a reducer is really created on our application is really a two step process. 70
Step one is to actually create the reducer. 71
Step two is to wire into our application so just you know obviously writing a function here doesn't 72
really wire anything up for us. 73
It's only half a game. 74
So Step two is to wire up to our application. 75
We'll do this inside of index. 76
JS. 77
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
we've already got this value inside of here where state is no state state state where it's going to 79
go ahead and delete this out of here like so. 80
So let's look back at our diagram here. 81
Real quick. 82
We've got a key of books and the value is the output of the books reducer. 83
The way that we're set up right here with this function called combine reducers. 84
This is really the mapping of our state right here. 85
So if we say books is books reducer like so that's what gives us loops. 86
The same kind of mapping. 87
So we've got books and the value is the books reducer right here. 88
There is a lot of code in here. 89
You know the combined reducers from redox And this route reducer and all is kind of what not in here 90
. 91
We're definitely in a run through this. 92
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
of how reducers work in general and we're definitely in to come back to here in the future section and 94
make sure we explain this combined reducers function at length before we go any farther. 95
We do have to import the books reducer into this file as well. 96
I'm actually going to capitalize books reducers well so we got capital B. 97
Books capital are reducer. 98
Then we'll import books reducer from the current directory so we'll use dot slash reducer books. 99
Cool. 100
This looks good. 101
OK so that's a incredibly a lot of talking for a tiny amount of code. 102
Right we got a reducers some key for it is just an object blah blah blah something something function 103
. 104
And heck how do we even test this right. 105
How would we know if we're going down the right path here. 106
Good question. 107
Let's go ahead and answer that in the next section.