1
00:00:00,800 --> 00:00:05,310
In the last section we had a long discussion about a change that we're going to make to our state object

2
00:00:05,310 --> 00:00:07,490
for this particular application.

3
00:00:07,650 --> 00:00:13,800
We had said that in our previous projects we had maintained a list of records and then the idea of a

4
00:00:13,800 --> 00:00:16,810
currently selected or currently viewed record.

5
00:00:16,890 --> 00:00:23,340
However because our application really has the idea of this extra piece of state which is the route

6
00:00:23,340 --> 00:00:29,850
of our application we really no longer need the idea of an active post where we currently selected post

7
00:00:29,850 --> 00:00:31,460
or something like that.

8
00:00:31,500 --> 00:00:37,110
So instead we had said that we're going to end up with just a single piece of state the posts object

9
00:00:38,010 --> 00:00:39,120
on that object.

10
00:00:39,120 --> 00:00:44,420
The key would be the idea of a particular post and then the value would be the post itself.

11
00:00:44,910 --> 00:00:50,370
Changing our posts object or poster right into an object like this is just going to make it a lot easier

12
00:00:50,370 --> 00:00:53,890
in the future when we want to find a very particular post.

13
00:00:54,030 --> 00:00:58,290
And just as a little preview I'm also going to let you know that it's going to make updating records

14
00:00:58,560 --> 00:01:00,090
way way easier as well.

15
00:01:00,150 --> 00:01:02,460
So that will be much easier to deal with too.

16
00:01:03,790 --> 00:01:07,210
So let's now continue by working on our first action creator.

17
00:01:07,210 --> 00:01:13,570
Will will be to fetch a list of posts and serve them up to our post index component.

18
00:01:13,570 --> 00:01:19,550
So let's get started by working on our action creator inside of the actions index not J.S. file.

19
00:01:19,680 --> 00:01:24,550
So gonna open that file up and we'll immediately get started by placing down some code for our first

20
00:01:24,550 --> 00:01:25,750
action creator.

21
00:01:26,020 --> 00:01:28,500
So I'll say export function.

22
00:01:28,630 --> 00:01:34,120
The purpose of this action Krater will be to fetch a list of posts so we'll call it fetch posts.

23
00:01:34,990 --> 00:01:41,140
And of course we need to return an object and that action which is the object right here has to have

24
00:01:41,140 --> 00:01:42,200
a type.

25
00:01:42,280 --> 00:01:44,770
So let's give it a typo or something like.

26
00:01:44,770 --> 00:01:47,620
How about fetch.

27
00:01:47,840 --> 00:01:51,230
Posts will define that type and export it right above.

28
00:01:51,320 --> 00:02:01,930
So will say export Export Konst fetch posts is fetch posts like so OK so when we start to think about

29
00:02:01,930 --> 00:02:07,090
this action creator which is supposed to fetch a list of posts and return them to that reduce or this

30
00:02:07,090 --> 00:02:11,770
action creator needs to reach out to that redux blog API that we were looking at.

31
00:02:11,770 --> 00:02:15,010
And so that's definitely going to involve a network request.

32
00:02:15,040 --> 00:02:19,930
Remember that whenever we are thinking about making network requests inside of an action creator we

33
00:02:19,930 --> 00:02:26,350
have to install X CEOs to make the actual request and we have to install redux promise to handle the

34
00:02:26,440 --> 00:02:29,930
asynchronous nature of the request itself.

35
00:02:30,220 --> 00:02:34,080
So let's flip on over to the terminal and install both of those libraries.

36
00:02:34,450 --> 00:02:43,480
So all change on over to the terminal and we'll do NPM install dash dash save X CEOs and redox promise

37
00:02:44,430 --> 00:02:46,520
and then we'll just let that thing run in the background.

38
00:02:48,520 --> 00:02:53,800
Before we make use of either of those modules inside of here let's make sure that we wire up redux promise

39
00:02:53,890 --> 00:02:56,770
as a middleware inside of our application.

40
00:02:56,770 --> 00:03:00,610
So I'm going to go back to our top level index start js file.

41
00:03:00,790 --> 00:03:02,200
Here it is right here.

42
00:03:02,290 --> 00:03:08,410
We're going to import redux promise and then wired up to the Apply middleware call just as we had done

43
00:03:08,410 --> 00:03:10,060
previously.

44
00:03:10,140 --> 00:03:17,480
So little import promise from redux promise.

45
00:03:18,130 --> 00:03:21,490
And then we will pass that into the supply middleware call right here.

46
00:03:21,700 --> 00:03:26,870
So promise like so let me zoom out just a little bit so you can see the whole line and we go

47
00:03:29,840 --> 00:03:31,120
OK that's looking good.

48
00:03:31,120 --> 00:03:33,350
Let's flip back over to our action creator.

49
00:03:33,670 --> 00:03:35,070
OK here we go.

50
00:03:35,170 --> 00:03:39,050
So we need to also import the actual library into this file right here.

51
00:03:39,130 --> 00:03:47,500
So let's import X-posts from Axel's inside of the actual creator.

52
00:03:47,560 --> 00:03:51,580
We will generate a new request by using the X library.

53
00:03:51,580 --> 00:03:58,750
So we'll say Konst request is Acciona get and we have to pass in the particular you are Elda we're trying

54
00:03:58,750 --> 00:04:01,150
to make and get requests to.

55
00:04:01,150 --> 00:04:05,260
So in our particular case we want to make a request to that redux blog API.

56
00:04:05,530 --> 00:04:07,480
So let's look back over the documentation real quick.

57
00:04:07,480 --> 00:04:08,620
Just as a review.

58
00:04:08,930 --> 00:04:09,270
OK.

59
00:04:09,280 --> 00:04:15,080
Sort of trying to go to redux blog Roku app dot com slash posts.

60
00:04:15,100 --> 00:04:18,590
Now we're definitely making multiple requests to this API right here.

61
00:04:18,640 --> 00:04:24,550
So I think that will probably define this first half of the L as just a kind of a route you are l of

62
00:04:24,550 --> 00:04:31,330
sorts and then we will adjust the exact endpoint inside of each additional action creator.

63
00:04:31,330 --> 00:04:39,910
So in short what I'm really suggesting that we do here is to maybe do something like say define a Konst

64
00:04:40,480 --> 00:04:49,060
a top of route you are l and that would be something like HTP redux blog.

65
00:04:49,110 --> 00:04:52,750
Heroku app dot com slash API.

66
00:04:52,750 --> 00:04:57,640
And then inside of this particular action creator will take that route you are l an add in a couple

67
00:04:57,640 --> 00:05:00,140
of other characters to the end of it.

68
00:05:00,280 --> 00:05:03,120
So is place a template strength by using tactics.

69
00:05:03,250 --> 00:05:08,890
So do make sure using back ticks right there and we'll say root you are l.

70
00:05:09,610 --> 00:05:17,370
So we're trying to make a request to slash API slash posts like so.

71
00:05:17,890 --> 00:05:23,050
Now the last thing to remember is that the API expects that we're going to pass along an API key as

72
00:05:23,050 --> 00:05:23,940
well.

73
00:05:24,040 --> 00:05:30,970
So as a second constant here I'm going to define an API key and that API key needs to be inside of a

74
00:05:30,970 --> 00:05:31,930
query string.

75
00:05:31,990 --> 00:05:37,800
And so we'll just define the entire query string by putting on the questionmark key.

76
00:05:37,840 --> 00:05:43,150
And I remember just make up any old key right here you can use absolutely any key you want just needs

77
00:05:43,150 --> 00:05:44,650
to be something unique.

78
00:05:44,680 --> 00:05:49,050
So I think that all of use paperclip.

79
00:05:49,630 --> 00:05:50,990
One two three four.

80
00:05:51,070 --> 00:05:56,130
That's probably be unique Zong going to add that into our request.

81
00:05:56,130 --> 00:05:57,430
You are all as well.

82
00:05:57,450 --> 00:06:04,660
So we'll place another had been a string interpellation API key.

83
00:06:04,740 --> 00:06:07,390
OK so that looks good for me at the request.

84
00:06:07,440 --> 00:06:12,450
Now the last thing to do is make sure that we add it to the payload of the action that we're returning.

85
00:06:12,780 --> 00:06:17,730
So we'll save payload and we'll pass in the request.

86
00:06:17,730 --> 00:06:23,340
So as a reminder of what's going on right here we're making the Axel's request we assign it to the variable

87
00:06:23,350 --> 00:06:30,270
request and then we assign the request to that payload property of the action that we're returning because

88
00:06:30,270 --> 00:06:36,240
the request is being assigned to the payload property the redux promis middleware that we made use of

89
00:06:36,240 --> 00:06:42,230
previously will automatically resolve this request for us whenever it sees this action come across.

90
00:06:42,480 --> 00:06:48,540
So by the time that this action arrives in the reducer the payload property will contain the response

91
00:06:48,540 --> 00:06:53,230
object from X-posts which will have our big old array of posts.

92
00:06:53,280 --> 00:06:54,860
So this is looking pretty good at this point.

93
00:06:54,900 --> 00:06:59,790
I think that we're about ready to flip on over to our reducer which we're going to create in the next

94
00:06:59,790 --> 00:07:03,690
section and start doing some of the implementation side of there as well.

95
00:07:03,690 --> 00:07:07,070
So let's take a quick break and I'll see it in just a second.