1
00:00:00,930 --> 00:00:04,920
We've now set up our first component with re-act rather inside of our application.

2
00:00:04,950 --> 00:00:09,900
So we're going to take a little bit of pause and move over to the redux side of things and get that

3
00:00:09,900 --> 00:00:12,810
side of our application set up and architected.

4
00:00:12,810 --> 00:00:17,490
So let's take a little bit of time to talk exactly about how we're going to set up the redux side of

5
00:00:17,490 --> 00:00:18,870
our application.

6
00:00:18,870 --> 00:00:23,910
We are going to do things just slightly differently when it comes to the design of our state objects

7
00:00:23,970 --> 00:00:25,130
this time around.

8
00:00:25,140 --> 00:00:29,890
And so in this section I wanted to explain why we're going to do things slightly differently.

9
00:00:30,600 --> 00:00:36,090
Now let's first start off by taking a look at our API documentation for the Post's API that we're going

10
00:00:36,090 --> 00:00:37,240
to make use of.

11
00:00:37,530 --> 00:00:43,230
So we had previously said that whenever we fetch a list of posts we would expect to get back an array

12
00:00:43,320 --> 00:00:51,690
of objects where each object represents one particular post every single post has an id property and

13
00:00:51,690 --> 00:00:54,150
that is a completely unique property.

14
00:00:54,150 --> 00:01:00,690
So it has an idea of one ID to two of three or whatever it might be Deyes want to remind you array of

15
00:01:00,690 --> 00:01:03,510
posts each post has an ID.

16
00:01:03,790 --> 00:01:04,020
OK.

17
00:01:04,050 --> 00:01:10,110
So that reminder in place let's flip over to a diagram and I want to look at how we might design our

18
00:01:10,110 --> 00:01:15,870
state object if we were following all similar conventions as we were in previous applications that we've

19
00:01:15,870 --> 00:01:17,280
looked at in this course.

20
00:01:17,520 --> 00:01:24,030
So this is how we might approach things if we were using identical approach to the previous applications

21
00:01:24,030 --> 00:01:24,850
we're working on.

22
00:01:24,880 --> 00:01:25,280
OK.

23
00:01:25,410 --> 00:01:28,020
So we're not going to follow this approach I just want to that right now.

24
00:01:28,140 --> 00:01:34,020
I just want to remind you about some aspects of taking an approach like this.

25
00:01:34,090 --> 00:01:39,070
So if you following some of the rules and lessons we had learned in the previous applications we worked

26
00:01:39,070 --> 00:01:46,120
on we might end up with say a post property and an active post property on our global state object.

27
00:01:46,120 --> 00:01:52,810
So this is the state that is being produced by redux right here are posts property which would be presumably

28
00:01:52,810 --> 00:01:59,530
produced by the post reducer would probably be an array and that array would contain a list of all the

29
00:01:59,530 --> 00:02:02,230
different posts that we have inside of our application.

30
00:02:02,620 --> 00:02:06,850
Then we would also have something like active post or selected post.

31
00:02:07,000 --> 00:02:10,830
And that would be the object that we were looking at.

32
00:02:10,840 --> 00:02:16,540
So the second property right here is really important when we start thinking about the show page inside

33
00:02:16,540 --> 00:02:22,080
of our application the page we want to show the user just one particular post on the screen.

34
00:02:22,090 --> 00:02:28,890
So just take Here's our post here's the post with I-85 presumably so you can imagine that when ever

35
00:02:28,900 --> 00:02:35,200
a user goes to that page we would set this active poster property to be in the post with ID 5 if we

36
00:02:35,200 --> 00:02:37,100
were going to this route right here.

37
00:02:39,130 --> 00:02:44,860
So the reason that we're not going to use this kind of structure right here for our state object inside

38
00:02:44,860 --> 00:02:51,210
this application is specifically to deal with one really interesting interaction between reactor outer

39
00:02:51,220 --> 00:02:56,520
and redox when it comes to kind of the idea of a currently selected object.

40
00:02:56,580 --> 00:02:57,120
OK.

41
00:02:57,580 --> 00:03:01,110
So let's let's kind of drill down into this is where things are going to get a little bit crazy.

42
00:03:01,120 --> 00:03:04,430
So do bear with me here for a little bit.

43
00:03:04,510 --> 00:03:09,430
We really think about our application state and the URL of the application.

44
00:03:09,430 --> 00:03:15,490
It's a really interesting thing because the you Arel that a user is visiting like this route up here

45
00:03:15,940 --> 00:03:19,630
is really a very critical piece of application state.

46
00:03:19,630 --> 00:03:19,950
Right.

47
00:03:19,980 --> 00:03:22,870
Like user visits some different you are l.

48
00:03:22,870 --> 00:03:25,750
We expect our application to update in some fashion.

49
00:03:25,750 --> 00:03:30,010
We expect to see different components appear on the screen and that's something that we've been saying

50
00:03:30,010 --> 00:03:32,090
about state all throughout this course.

51
00:03:32,200 --> 00:03:35,470
Whenever state changes we really render our application.

52
00:03:35,500 --> 00:03:41,590
And so how is the URL any different from another piece of state whenever the URL changes we want to

53
00:03:41,590 --> 00:03:45,340
show some update we want a rerun or something we want to fetch some data.

54
00:03:45,400 --> 00:03:51,610
And so when we really think about it the current route that a user is looking at is really another piece

55
00:03:51,610 --> 00:03:57,910
of state inside of our application and most importantly for this show page right here.

56
00:03:58,000 --> 00:04:04,360
When you really think about it the ID that is reflected inside of that route or this particular route

57
00:04:04,360 --> 00:04:10,900
for showing the user or a particular post is really providing the exact same information as is being

58
00:04:10,900 --> 00:04:14,380
provided by this active Post piece of state right here.

59
00:04:14,380 --> 00:04:19,000
So really this active post thing is really a duplicate piece of state.

60
00:04:19,000 --> 00:04:22,740
Its really this piece of soup's wrong way.

61
00:04:22,780 --> 00:04:27,500
It's really the exact same thing as reflecting the post ID and the you are l.

62
00:04:27,520 --> 00:04:33,160
So I'm going to suggest that since we are already reflecting the idea of the post that we're trying

63
00:04:33,160 --> 00:04:40,510
to look at inside the RL Maybe we really don't need this active Post piece of state at all.

64
00:04:40,510 --> 00:04:41,800
Who cares about it right.

65
00:04:41,830 --> 00:04:44,810
We don't need to reflect the active post inside the url.

66
00:04:44,950 --> 00:04:52,480
We can just take our big list of posts we can take the idea out of the URL and use those two pieces

67
00:04:52,480 --> 00:04:56,270
of information to decide what posts we want to show on the screen.

68
00:04:56,530 --> 00:05:02,590
So in other words whenever we render the post show component we can look at the URL we can look at our

69
00:05:02,680 --> 00:05:09,580
list of posts and we can say hey find the post with ID 5 out of this list and show it on the screen

70
00:05:09,580 --> 00:05:10,620
to the user.

71
00:05:10,900 --> 00:05:16,620
OK so that's that's like Step 1 Step 1 in changing our state structure here.

72
00:05:16,630 --> 00:05:23,290
So step one is to just understand why we really don't need that active Post piece of state.

73
00:05:23,320 --> 00:05:25,690
So hopefully at this point in time you're still with me here.

74
00:05:25,690 --> 00:05:27,710
Hopefully this makes sense in your thinking.

75
00:05:27,760 --> 00:05:29,780
Okay yeah that sounds reasonable.

76
00:05:29,820 --> 00:05:35,320
You are l does reflect the ID so we really don't need this extra extra piece of state in here because

77
00:05:35,320 --> 00:05:42,550
we can manually calculate it by looking at our posts list and the u r l that a user is looking at at

78
00:05:42,550 --> 00:05:43,830
any given time.

79
00:05:43,840 --> 00:05:45,920
So again that's step 1.

80
00:05:45,940 --> 00:05:51,490
So with that kind of configuration that change in mind I want to make just one more small change to

81
00:05:51,490 --> 00:05:57,190
our application state and this additional change is going to be the final product or what the state

82
00:05:57,190 --> 00:05:59,560
is going to look like inside of our application.

83
00:05:59,560 --> 00:06:00,830
So we just may change number one.

84
00:06:00,850 --> 00:06:05,410
I'm going to make one other small change and that will be the final product.

85
00:06:05,440 --> 00:06:07,680
So let's look at a slide for that.

86
00:06:08,050 --> 00:06:08,990
Okay.

87
00:06:09,490 --> 00:06:13,870
So two small changes really one small change made to the diagram that we're just looking at.

88
00:06:13,870 --> 00:06:16,670
So again we don't have the active piece of state anymore.

89
00:06:16,810 --> 00:06:22,990
But this time around I'm saying that maybe it would make more sense to store our list of posts inside

90
00:06:22,990 --> 00:06:25,810
of an object rather than an array.

91
00:06:26,230 --> 00:06:29,050
So notice that inside of this object that I'm suggesting we use.

92
00:06:29,050 --> 00:06:36,270
Now I'm saying that the key will be the idea of the post and then the value will be the post itself.

93
00:06:36,370 --> 00:06:40,500
So you can see that I've got an object starting right here and closing over here.

94
00:06:40,570 --> 00:06:48,010
It has an idea for and I'm going to suggest that maybe we use a key of four for that post because that's

95
00:06:48,010 --> 00:06:50,830
the idea the post and then same thing for the next one down here.

96
00:06:50,950 --> 00:06:55,400
We've got an ID and a queue of 12 ID of 12 right here.

97
00:06:55,520 --> 00:07:00,700
And so the reason they are making this change right here is just to make it easier to find a particular

98
00:07:00,700 --> 00:07:01,310
post.

99
00:07:01,450 --> 00:07:05,950
Out of all the posts we've fetched so I want you to imagine for a second just imagine that we still

100
00:07:05,950 --> 00:07:10,210
were using an array like this right here.

101
00:07:10,360 --> 00:07:16,090
If we then wanted to find a particular post like the post ID for to show on the screen we would have

102
00:07:16,090 --> 00:07:22,270
to write like a for loop or use the find the re helper to pick out a particular post from this array

103
00:07:22,270 --> 00:07:23,790
of objects right here.

104
00:07:23,980 --> 00:07:29,840
But we can do that Look-Up much more quickly if we store our posts in an object like so.

105
00:07:29,980 --> 00:07:34,920
Because with this type of structure right here all of a sudden to find some particular post when we

106
00:07:34,930 --> 00:07:44,060
get a new Olson to find our particular posts it might look something like state DOT pose and then we'll

107
00:07:44,060 --> 00:07:48,710
access post ID something like that right there.

108
00:07:48,740 --> 00:07:53,780
And that would return say you know this given post or that particular post.

109
00:07:53,780 --> 00:08:00,260
So again the purpose of going from an array to an object like so is just to make this look up process

110
00:08:00,290 --> 00:08:03,410
a little bit easier and involve a little bit less code.

111
00:08:03,750 --> 00:08:08,110
And so to be 100 percent clear this post Id very well right here.

112
00:08:08,210 --> 00:08:12,890
I'm imagining that we're kind of pulling that directly out of you or else so maybe we would look at

113
00:08:12,890 --> 00:08:18,200
the URL we would pull five out of there and then we would use that five to look up against our object

114
00:08:18,200 --> 00:08:20,270
containing all the different posts.

115
00:08:20,870 --> 00:08:21,270
OK.

116
00:08:21,320 --> 00:08:27,890
So at this point I've got to tell you introducing the idea of an object for holding properties or records

117
00:08:27,920 --> 00:08:30,820
inside of redox is a very advanced concept.

118
00:08:30,860 --> 00:08:34,990
And so this really is a very challenging refactor right here that I'm suggesting but I got to tell you

119
00:08:35,060 --> 00:08:40,310
this is how we really do it in production this is how we really build large applications that scale

120
00:08:40,310 --> 00:08:40,660
well.

121
00:08:40,670 --> 00:08:45,980
So it is a little bit painful refactor as we go through this but you know it's definitely something

122
00:08:45,980 --> 00:08:48,170
that we have to do out of necessity.

123
00:08:48,230 --> 00:08:52,580
So with this knowledge in mind let's continue in the next section we're going to start working on our

124
00:08:52,580 --> 00:08:59,060
action creator to fetch a list of posts and we're going to somehow turn the array of posts that we get

125
00:08:59,060 --> 00:09:04,030
back from our API into this object that contains the post as well.

126
00:09:04,040 --> 00:09:06,960
So let's take care of those challenges in the next section.