1

00:00:01,260  -->  00:00:06,960
In the last section we put together an action creator to fetch our lists of posts and this section will

2

00:00:06,960  -->  00:00:11,430
implement a reducer to catch that data and produce our application state.

3

00:00:11,910  -->  00:00:19,230
So as before our reducer will be inside of a new file inside of the reducers folder will make the new

4

00:00:19,230  -->  00:00:22,910
file and call it reducer posts.

5

00:00:22,990  -->  00:00:29,850
J us before we start writing the reducer though don't forget it always needs to be wired up inside of

6

00:00:29,850  -->  00:00:34,770
our reducers index file with the combined reducers call.

7

00:00:34,770  -->  00:00:38,750
So at the top we will import post reducer.

8

00:00:38,870  -->  00:00:48,550
It's the file that we just created from reducer posts and then we will replace the existing state passed

9

00:00:48,570  -->  00:00:49,080
to right here.

10

00:00:49,080  -->  00:00:56,530
That's all it does it just passes through a state with posts post read user

11

00:00:59,170  -->  00:01:01,170
go.

12

00:01:01,260  -->  00:01:03,200
Now back to the reducer itself.

13

00:01:03,330  -->  00:01:06,180
I'm in sight of reduce or post right now.

14

00:01:06,180  -->  00:01:10,740
Again this is going to be a little bit of boilerplate so it's stuff we've already gone over.

15

00:01:10,740  -->  00:01:14,610
Kind of boring stuff but let's just go ahead and bang through it really quick.

16

00:01:14,880  -->  00:01:24,850
So at the top we'll define our initial state as an object and then we will immediately write our reducers

17

00:01:24,850  -->  00:01:24,870
.

18

00:01:24,880  -->  00:01:34,350
So export default function and our state will be defaulted to initial state and we get an action every

19

00:01:34,350  -->  00:01:44,970
time and will define our switch statement based on the action type and by default we will just return

20

00:01:46,220  -->  00:01:46,880
state.

21

00:01:47,070  -->  00:01:49,290
Just go ahead and pass it right on through.

22

00:01:49,320  -->  00:01:57,360
So by default our posts piece of state will be an object and if we don't get an action that the producer

23

00:01:57,360  -->  00:01:59,950
cares about we just return the state.

24

00:02:00,470  -->  00:02:03,290
So the normal boilerplate reduce right here.

25

00:02:03,570  -->  00:02:09,470
So let's add the case in which a successful fetch of the Post's index come through.

26

00:02:09,570  -->  00:02:12,910
So at the top we're going to need to import the actions type.

27

00:02:12,930  -->  00:02:15,060
This is the action that we just created.

28

00:02:15,390  -->  00:02:23,030
So import fetch posts from actions index.

29

00:02:23,070  -->  00:02:34,380
That's the one that we just created and then we'll add a case to fetch posts.

30

00:02:34,380  -->  00:02:34,810
All right.

31

00:02:34,980  -->  00:02:38,100
So this is a good first stab at our reduce right here.

32

00:02:38,100  -->  00:02:43,050
Now we've only written a handful of reducers but you're going to find that they usually end up looking

33

00:02:43,050  -->  00:02:44,330
very similar to each other.

34

00:02:44,370  -->  00:02:47,260
Almost always something just like this.

35

00:02:47,580  -->  00:02:54,470
We always have a single function for the actual reducer and by convention it can contains a switch statement

36

00:02:54,480  -->  00:02:57,940
for all the different types of actions that we have flowing through.

37

00:02:58,140  -->  00:03:03,750
Now before we go any further you know before we kind of dissect our action right here we need to talk

38

00:03:03,750  -->  00:03:06,090
about the structure of our state.

39

00:03:06,150  -->  00:03:10,210
Remember our App State is something that we really want to get right on day one.

40

00:03:10,260  -->  00:03:16,170
As much as possible we want to avoid having to refactor the structure of our state later on.

41

00:03:16,170  -->  00:03:20,520
We always can refactor the state you know if we make a mistake if we decide Whoops you know this is

42

00:03:20,520  -->  00:03:24,600
an array but it really makes more sense for it to be an object or what have you.

43

00:03:24,600  -->  00:03:26,290
We can always refactor it later on.

44

00:03:26,460  -->  00:03:31,380
But I recommend that you put at least some solid thought into what your state should look like before

45

00:03:31,740  -->  00:03:32,380
you start.

46

00:03:32,430  -->  00:03:35,290
You know just diving in first.

47

00:03:35,580  -->  00:03:39,680
So to that end we need to think about what our state needs to look like.

48

00:03:39,690  -->  00:03:47,430
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

00:03:47,430  -->  00:03:50,120
get an idea of what we want this to look like.

50

00:03:50,970  -->  00:03:58,290
So the index page shows a list of different blog posts so we definitely need either an object or an

51

00:03:58,290  -->  00:04:03,240
array to hold all of these blog posts.

52

00:04:03,240  -->  00:04:08,790
Remember the one really interesting thing about our application is that when we want to show a single

53

00:04:08,790  -->  00:04:15,180
blog post you know like the post show route only the show gets the content in the response.

54

00:04:15,180  -->  00:04:21,860
So there really is kind of a distinction between the list of blog posts and a single blog post right

55

00:04:21,870  -->  00:04:22,900
here.

56

00:04:23,760  -->  00:04:27,740
That means that we can't really depend on just having a single list of blog posts.

57

00:04:27,840  -->  00:04:32,360
We really need a separate piece of state that holds the current active blog post.

58

00:04:32,370  -->  00:04:37,950
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

00:04:39,500  -->  00:04:44,520
so it's really again it really points us to having a separate piece of state like we did produce in

60

00:04:44,520  -->  00:04:51,690
our previous applications a sort of active post so to speak that holds the currently selected post.

61

00:04:52,080  -->  00:04:53,090
So let's run with that.

62

00:04:53,100  -->  00:04:54,960
We'll have two pieces of state.

63

00:04:55,020  -->  00:05:01,320
One is going to be an array which will hold a list of blog posts that contain only the title and categories

64

00:05:01,790  -->  00:05:09,390
and then we'll have a sort of active post the post that we are currently showing in detail page 4 and

65

00:05:09,390  -->  00:05:11,970
that will also include its content right here

66

00:05:15,510  -->  00:05:20,420
so let's reflect that decision inside of our initial state here at the top.

67

00:05:20,430  -->  00:05:23,460
I'm going to add two properties in here.

68

00:05:23,640  -->  00:05:26,640
One is going to be all and it's going to be an empty array.

69

00:05:26,700  -->  00:05:32,940
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

00:05:32,940  -->  00:05:34,320
the index page.

71

00:05:34,320  -->  00:05:40,590
You know it's just going to be an array of blog posts from our index row and then separately will have

72

00:05:40,710  -->  00:05:44,520
another key and it will be post no.

73

00:05:44,870  -->  00:05:48,460
And so you can kind of think of this as being our art.

74

00:05:48,510  -->  00:05:50,870
Individual posts show action.

75

00:05:50,910  -->  00:05:56,250
This is only going to hold a single post and so we're going to default it to null.

76

00:05:56,310  -->  00:05:58,990
Now note that these are these initial values.

77

00:05:59,010  -->  00:06:01,350
Here are somewhat arbitrary.

78

00:06:01,350  -->  00:06:07,110
I could have just as easily provided you know Noal here for all but I'm going to specifically use an

79

00:06:07,110  -->  00:06:09,570
array just to communicate intent.

80

00:06:09,570  -->  00:06:12,670
You know this is intended to be a list of blog posts.

81

00:06:12,690  -->  00:06:17,100
I definitely wanted to be in a race so a future developer when you're looking at this.

82

00:06:17,280  -->  00:06:20,550
You know how the expectation is going to be an array.

83

00:06:21,480  -->  00:06:25,530
OK sorry douceur is looking pretty good here we've got our initial state in place.

84

00:06:25,680  -->  00:06:29,220
Let's go ahead and continue with its implementation in the next section