In the last section we put together an action creator to fetch our lists of posts and this section will 2
implement a reducer to catch that data and produce our application state. 3
So as before our reducer will be inside of a new file inside of the reducers folder will make the new 4
file and call it reducer posts. 5
J us before we start writing the reducer though don't forget it always needs to be wired up inside of 6
our reducers index file with the combined reducers call. 7
So at the top we will import post reducer. 8
It's the file that we just created from reducer posts and then we will replace the existing state passed 9
to right here. 10
That's all it does it just passes through a state with posts post read user 11
go. 12
Now back to the reducer itself. 13
I'm in sight of reduce or post right now. 14
Again this is going to be a little bit of boilerplate so it's stuff we've already gone over. 15
Kind of boring stuff but let's just go ahead and bang through it really quick. 16
So at the top we'll define our initial state as an object and then we will immediately write our reducers 17
. 18
So export default function and our state will be defaulted to initial state and we get an action every 19
time and will define our switch statement based on the action type and by default we will just return 20
state. 21
Just go ahead and pass it right on through. 22
So by default our posts piece of state will be an object and if we don't get an action that the producer 23
cares about we just return the state. 24
So the normal boilerplate reduce right here. 25
So let's add the case in which a successful fetch of the Post's index come through. 26
So at the top we're going to need to import the actions type. 27
This is the action that we just created. 28
So import fetch posts from actions index. 29
That's the one that we just created and then we'll add a case to fetch posts. 30
All right. 31
So this is a good first stab at our reduce right here. 32
Now we've only written a handful of reducers but you're going to find that they usually end up looking 33
very similar to each other. 34
Almost always something just like this. 35
We always have a single function for the actual reducer and by convention it can contains a switch statement 36
for all the different types of actions that we have flowing through. 37
Now before we go any further you know before we kind of dissect our action right here we need to talk 38
about the structure of our state. 39
Remember our App State is something that we really want to get right on day one. 40
As much as possible we want to avoid having to refactor the structure of our state later on. 41
We always can refactor the state you know if we make a mistake if we decide Whoops you know this is 42
an array but it really makes more sense for it to be an object or what have you. 43
We can always refactor it later on. 44
But I recommend that you put at least some solid thought into what your state should look like before 45
you start. 46
You know just diving in first. 47
So to that end we need to think about what our state needs to look like. 48
Let's go back to our mockup really quick and look at our you know we look at our mockup see if we can 49
get an idea of what we want this to look like. 50
So the index page shows a list of different blog posts so we definitely need either an object or an 51
array to hold all of these blog posts. 52
Remember the one really interesting thing about our application is that when we want to show a single 53
blog post you know like the post show route only the show gets the content in the response. 54
So there really is kind of a distinction between the list of blog posts and a single blog post right 55
here. 56
That means that we can't really depend on just having a single list of blog posts. 57
We really need a separate piece of state that holds the current active blog post. 58
You know the one that we just did a fecche for to do art to show you know the single post at the time 59
so it's really again it really points us to having a separate piece of state like we did produce in 60
our previous applications a sort of active post so to speak that holds the currently selected post. 61
So let's run with that. 62
We'll have two pieces of state. 63
One is going to be an array which will hold a list of blog posts that contain only the title and categories 64
and then we'll have a sort of active post the post that we are currently showing in detail page 4 and 65
that will also include its content right here 66
so let's reflect that decision inside of our initial state here at the top. 67
I'm going to add two properties in here. 68
One is going to be all and it's going to be an empty array. 69
So we'll say this is going to be the list of our blog posts it's going to be what we want to show on 70
the index page. 71
You know it's just going to be an array of blog posts from our index row and then separately will have 72
another key and it will be post no. 73
And so you can kind of think of this as being our art. 74
Individual posts show action. 75
This is only going to hold a single post and so we're going to default it to null. 76
Now note that these are these initial values. 77
Here are somewhat arbitrary. 78
I could have just as easily provided you know Noal here for all but I'm going to specifically use an 79
array just to communicate intent. 80
You know this is intended to be a list of blog posts. 81
I definitely wanted to be in a race so a future developer when you're looking at this. 82
You know how the expectation is going to be an array. 83
OK sorry douceur is looking pretty good here we've got our initial state in place. 84
Let's go ahead and continue with its implementation in the next section