1
00:00:00,770 --> 00:00:03,570
In this video we're going to start working on fenceposts and users.

2
00:00:03,750 --> 00:00:06,460
Remember the goal here is to call fetch posts.

3
00:00:06,600 --> 00:00:10,360
Wait for it to get all of the posts and retrieve them and whatnot.

4
00:00:10,440 --> 00:00:12,290
We're then going to get the list of posts and so on.

5
00:00:12,300 --> 00:00:13,580
All that good stuff.

6
00:00:13,590 --> 00:00:17,310
All right so let's flip back over to our action creator file and we're going to create this new action

7
00:00:17,310 --> 00:00:18,900
creator at the very top.

8
00:00:18,960 --> 00:00:24,780
So I going to say expert Konst fetch posts and users like so.

9
00:00:24,900 --> 00:00:29,430
All right and we're going to fire this up with redux thunked just as we have with all the other action

10
00:00:29,430 --> 00:00:30,500
creators as well.

11
00:00:30,510 --> 00:00:34,580
We're going to use that same kind of complicated kind of look and syntax here.

12
00:00:34,650 --> 00:00:40,560
So we're going to have one arrow function that returns an arrow function that is async.

13
00:00:40,570 --> 00:00:45,130
So it's going to have some syncopate syntax in it and we're going to again received that argument of

14
00:00:45,190 --> 00:00:48,820
dispatch so that we can dispatch our own actions inside of here.

15
00:00:49,240 --> 00:00:53,680
OK so here's where things get just a little bit tiny bit challenging.

16
00:00:53,830 --> 00:00:54,280
OK.

17
00:00:54,310 --> 00:01:00,010
Inside of fecche posts and users we're going to call fetch posts and we are going to call that user

18
00:01:00,160 --> 00:01:01,900
multiple times.

19
00:01:01,900 --> 00:01:08,480
Our application like over react code all of our components are going to call this action Creator alone.

20
00:01:08,860 --> 00:01:12,830
They are no longer going to call the other two action critters we have.

21
00:01:12,900 --> 00:01:17,490
So we're not going to expect that our component is going to call fecche posts and fetch the list of

22
00:01:17,490 --> 00:01:19,830
posts then eventually dispatch them.

23
00:01:19,830 --> 00:01:24,780
So what I'm trying to say here is that when we call fecche posts in users that is the only action creator

24
00:01:24,780 --> 00:01:30,030
that you and I are going to call in so we need to make sure that when we eventually delegate to fetch

25
00:01:30,030 --> 00:01:34,590
post to actually go and fetch the posts we handle that action creator appropriately.

26
00:01:34,590 --> 00:01:39,600
And what I mean by that is we need to make sure that this action create right you're still has some

27
00:01:39,690 --> 00:01:42,720
action that is going to get dispatch at the end of the day.

28
00:01:43,570 --> 00:01:50,170
So in other words you and I cannot just call like fetch posts and say OK like let's get our posts and

29
00:01:50,170 --> 00:01:51,510
just kind of like leave it there.

30
00:01:51,730 --> 00:01:57,430
Instead we need to make sure that when we call this action creator whatever action or whatever function

31
00:01:57,430 --> 00:02:00,040
it returns gets dispatched as well.

32
00:02:00,070 --> 00:02:04,090
So it goes into that entire pipeline of being dispatch goes through the middle wheres and eventually

33
00:02:04,090 --> 00:02:05,810
goes into the reducers.

34
00:02:05,820 --> 00:02:10,420
So long story short what Im really saying here is that when we call fecche post we have to pass the

35
00:02:10,420 --> 00:02:13,940
result of calling that thing into our dispatch function.

36
00:02:14,020 --> 00:02:19,880
So we are now kind of manually dispatching this action creator or the result of calling the action creator.

37
00:02:20,050 --> 00:02:23,760
Now think about what happens we're going to call fecche post right here.

38
00:02:23,770 --> 00:02:25,740
That's going to invoke this function.

39
00:02:26,580 --> 00:02:30,690
That's going to return this inner function right here.

40
00:02:30,690 --> 00:02:33,480
So we are going to dispatch a function.

41
00:02:33,690 --> 00:02:39,390
Remember whenever we dispatch a function redux thunk is going to pick it up and automatically invoke

42
00:02:39,390 --> 00:02:40,080
it.

43
00:02:40,080 --> 00:02:45,210
It's a redux thunk is going to see this inner function right here and invoke it and pasand dispatch

44
00:02:45,270 --> 00:02:47,620
as the first argument.

45
00:02:47,640 --> 00:02:52,350
So then this inner function is going to make a request over to our API get the list of posts and then

46
00:02:52,350 --> 00:02:58,850
it's going to dispatch its own action internally and start that entire process of updating our reducers.

47
00:02:58,860 --> 00:03:03,990
So again whenever we call an action creator from inside of an action creator we need to make sure that

48
00:03:03,990 --> 00:03:08,560
we dispatch the result of calling the action creator.

49
00:03:08,620 --> 00:03:12,240
OK so that code right there is going to work exactly as we would expect.

50
00:03:12,270 --> 00:03:16,740
So were going to call fecche posts fetch the list of posts and then eventually update our reducer.

51
00:03:16,740 --> 00:03:20,560
So now we want to go on to the next step here which is to get the list of posts.

52
00:03:20,730 --> 00:03:23,250
And this is where the second challenge starts to come in.

53
00:03:23,280 --> 00:03:29,040
Remember whenever we call fetch posts that is going to initiate a asynchronous request over to our API

54
00:03:29,070 --> 00:03:30,440
and get our list of posts.

55
00:03:30,720 --> 00:03:36,450
So we need to somehow make sure that we do not attempt to get at our list of posts that have been fetched

56
00:03:36,690 --> 00:03:42,070
until this action Krita right here has completed and has fetched all the appropriate data.

57
00:03:42,910 --> 00:03:45,370
So to do so this is going to be a little bit crazy.

58
00:03:45,400 --> 00:03:47,910
We're going to put the await keyword in front of it.

59
00:03:47,980 --> 00:03:53,050
So the reason that we put the await key word right there it's going to make sure that when we dispatch

60
00:03:53,050 --> 00:03:58,210
that action creator and this inner function eventually gets called the Awake key word right here is

61
00:03:58,210 --> 00:04:02,950
going to essentially make sure that we wait for this API request to be completed before we move on and

62
00:04:02,950 --> 00:04:06,830
do anything else inside of our new action creator right here.

63
00:04:07,630 --> 00:04:07,840
All right.

64
00:04:07,840 --> 00:04:12,790
I know this is a little bit intense but honestly those two steps are the hardest part to understand.

65
00:04:13,010 --> 00:04:14,540
So one more quick review.

66
00:04:14,690 --> 00:04:16,650
Again we color action creator.

67
00:04:16,660 --> 00:04:19,150
That's going to return the inner function.

68
00:04:19,240 --> 00:04:23,140
We're going to make sure we dispatch that things so this inner function is going to show up inside of

69
00:04:23,160 --> 00:04:30,490
redux thunk and get invoked with dispatch then to make sure that we don't try to do any other logic

70
00:04:30,490 --> 00:04:34,340
inside of our actual creator until we have successfully fetch that list of posts.

71
00:04:34,540 --> 00:04:38,680
We're going to make sure that we put the Awake key word right here in front of that entire call and

72
00:04:38,680 --> 00:04:42,600
that's going to make sure that we're not going to progress down to the next line of code right here.

73
00:04:42,630 --> 00:04:47,170
And so we have successfully fetched a list of posts and dispatched the action for it.

74
00:04:48,020 --> 00:04:52,460
Now at this point I feel like it would be really valuable to maybe put a debugger statement or a console

75
00:04:52,460 --> 00:04:57,050
log inside of this action creator and then attempt to call it just to make sure we really understand

76
00:04:57,050 --> 00:04:58,900
the idea of what's going on here.

77
00:04:58,940 --> 00:05:09,100
So I'm going to put down about a console log right here and I'll say fetched us and then I'm going to

78
00:05:09,100 --> 00:05:16,600
put a council log right above and I'll say about to fetch posts like so and then I'm going to flip back

79
00:05:16,600 --> 00:05:21,070
over to one of my components and we're going to wire up the fenceposts and users action creators so

80
00:05:21,070 --> 00:05:22,530
that this thing actually gets cold.

81
00:05:22,630 --> 00:05:25,030
So we can see these console locks in action.

82
00:05:25,030 --> 00:05:30,280
So to do so when I flip back over to my post list component at the very top I will make sure I import

83
00:05:30,280 --> 00:05:36,760
this new action creator called fetch posts and users and then inside of this component did mt life cycle

84
00:05:36,760 --> 00:05:37,590
method right here.

85
00:05:37,650 --> 00:05:44,160
I'm going to remove the old action creator and instead I will call this stop Propst not fetch posts

86
00:05:44,250 --> 00:05:49,620
and users and then finally will go down to the very bottom of the file and hook up that action creator

87
00:05:49,620 --> 00:05:52,020
to our connect function as well.

88
00:05:52,020 --> 00:05:57,150
So down at the very bottom of find connect we don't need to wire fetch posts anymore.

89
00:05:57,170 --> 00:06:00,280
Instead we will wire up fecche posts and users.

90
00:06:00,770 --> 00:06:05,930
And while we're at it we can actually remove the import for fetch posts back up at the top as well because

91
00:06:05,930 --> 00:06:07,890
we don't really need that action creator anymore.

92
00:06:09,200 --> 00:06:11,940
OK so let's save this and we'll see if we get those console logs.

93
00:06:11,960 --> 00:06:13,670
Successfully.

94
00:06:13,680 --> 00:06:14,070
All right.

95
00:06:14,090 --> 00:06:19,220
I'm going to flip back over and I'll open up my console

96
00:06:22,130 --> 00:06:26,250
refresh and you'll see that I get I do get a 404 right here.

97
00:06:26,270 --> 00:06:28,520
This is to be expected.

98
00:06:28,580 --> 00:06:31,030
You probably do not see a 4 or 4 you might see one.

99
00:06:31,040 --> 00:06:34,920
You'll notice that this is trying to fetch users with one 999.

100
00:06:34,940 --> 00:06:40,220
So in reality that based on placeholder and point it actually has the ability to support people posting

101
00:06:40,220 --> 00:06:41,810
data to that API.

102
00:06:41,810 --> 00:06:46,160
So every now and then you're going to see kind of a strange record appear right there so you can completely

103
00:06:46,160 --> 00:06:47,740
ignore my 404 right there.

104
00:06:47,750 --> 00:06:49,910
Chances are you are not seeing the same thing.

105
00:06:49,980 --> 00:06:53,750
Much more importantly you'll notice that we have the two console logs inside of here and we still see

106
00:06:53,750 --> 00:06:56,120
our list of posts appearing on the screen.

107
00:06:56,360 --> 00:07:01,220
So we see about to fetch posts and then I don't know if you notice it but when we saw that console log

108
00:07:01,220 --> 00:07:06,380
appear there was the slightest little delay where we were waiting for that list opposed to fetch and

109
00:07:06,380 --> 00:07:10,140
then processed by our reducers and then we saw the second console log.

110
00:07:10,250 --> 00:07:11,810
Let's do that again really quickly here.

111
00:07:11,960 --> 00:07:16,730
So I'm going to refresh and you'll see the first one and then there's the tiniest little delay and then

112
00:07:16,730 --> 00:07:18,370
you saw the second one appear.

113
00:07:18,650 --> 00:07:23,660
So that means that this a weight syntax right here is definitely making sure that we do not progress

114
00:07:23,660 --> 00:07:28,800
down to the next line of code until we have successfully fetch the list of posts dispatched an action

115
00:07:28,820 --> 00:07:32,740
in updated are reduced her with all those different fecche posts.

116
00:07:32,770 --> 00:07:36,220
We spent a pretty good amount of time on this and I hope it is at least somewhat clear.

117
00:07:36,220 --> 00:07:40,930
Let's take a pause right here and we'll start to finish up this new revamped action creator in the next

118
00:07:40,930 --> 00:07:41,480
video.