1
00:00:00,950 --> 00:00:06,390
Singing we have to do inside of our post-New component is make sure that we correctly handles the middle

2
00:00:06,390 --> 00:00:07,300
event.

3
00:00:07,320 --> 00:00:08,880
So we've looked at some middle a little bit.

4
00:00:08,880 --> 00:00:15,600
Previously we had said that on it will be called with an object that we are going to call values and

5
00:00:15,600 --> 00:00:21,050
this object contains the post title categories in content inside of it.

6
00:00:21,510 --> 00:00:27,210
So it's really going to be up to us to somehow take this values object and post it up to our API to

7
00:00:27,210 --> 00:00:34,620
save it on our backend whenever we think about saving data or making API requests of any type inside

8
00:00:34,610 --> 00:00:35,870
of a redux application.

9
00:00:35,880 --> 00:00:39,700
We always want to be thinking about action creators.

10
00:00:39,990 --> 00:00:46,050
So inside of on submit we really want to be calling an action creator and that action creator will be

11
00:00:46,050 --> 00:00:51,700
responsible for posting the API or simply me posting the post into the API.

12
00:00:52,350 --> 00:00:57,500
I think that will first start off by creating our action creator and put our API request inside of it.

13
00:00:57,570 --> 00:01:02,420
After that we'll then figure out exactly how to hook it up to this on submit function.

14
00:01:02,670 --> 00:01:07,590
And I say we'll figure out how because there are going to be just a little bit of challenges and exactly

15
00:01:07,590 --> 00:01:09,800
how this all comes together.

16
00:01:09,870 --> 00:01:16,230
So let's start off by changing over to our actions index not G-S file inside of here.

17
00:01:16,260 --> 00:01:20,850
We'll get started by making a new action crater at the bottom.

18
00:01:20,850 --> 00:01:30,470
So I say export function and we call it create post they'll receive the values object which will be

19
00:01:30,470 --> 00:01:31,700
the blog post.

20
00:01:31,700 --> 00:01:39,110
So the thing that actually contains the title categories in content than inside of here we can follow

21
00:01:39,110 --> 00:01:42,680
the exact same syntax as we used on fecche posts.

22
00:01:42,740 --> 00:01:49,470
We'll make a request to the X-C or to our API with accedes and then we will return an action which retape

23
00:01:49,520 --> 00:01:53,320
which contains the request as the payload.

24
00:01:53,330 --> 00:01:57,030
So let's make our request this time around.

25
00:01:57,050 --> 00:02:01,520
We want to make a post type request to our back and API.

26
00:02:01,520 --> 00:02:04,440
We want to send it to route.

27
00:02:04,450 --> 00:02:09,770
So let's get those curly braces on their route you are l d make sure that you're using tactics around

28
00:02:09,770 --> 00:02:13,580
this because we are using a string template.

29
00:02:13,580 --> 00:02:16,160
We want to post it to the posts and point.

30
00:02:16,250 --> 00:02:21,350
And we also want to provide our API key.

31
00:02:21,530 --> 00:02:26,360
And finally we want to make sure that the request is made with the values from the form.

32
00:02:26,360 --> 00:02:30,340
So as a second argument we'll provide values.

33
00:02:30,830 --> 00:02:35,390
We haven't really used post requests with axially before they really follow the same type of method

34
00:02:35,390 --> 00:02:41,660
signature as a get request so we're providing the URL is the first argument and then the second argument

35
00:02:41,690 --> 00:02:46,230
is the object or the data that we want to send to this remote API.

36
00:02:47,240 --> 00:02:51,050
Now we can create our action at the bottom or return it.

37
00:02:51,380 --> 00:02:58,520
So we will return with a type of will we'll imagine that we're going to have a type in just a second

38
00:02:58,520 --> 00:03:05,390
called create post and we'll have a payload of requests like so.

39
00:03:05,390 --> 00:03:07,670
So let's make that type of create post.

40
00:03:07,760 --> 00:03:11,950
Scroll up a little bit will say export Konst.

41
00:03:12,260 --> 00:03:16,980
Great post and that will be create post.

42
00:03:17,530 --> 00:03:18,080
OK.

43
00:03:18,110 --> 00:03:19,820
This is looking pretty good.

44
00:03:20,000 --> 00:03:25,120
Now before you hook this up to the component I want to kind of follow the action Kreator full circle

45
00:03:25,550 --> 00:03:30,470
and by full circle I mean I want to go all the way over to the reducer and figure out what's really

46
00:03:30,470 --> 00:03:35,960
going to happen inside the reducer when it sees an action of type create post.

47
00:03:36,260 --> 00:03:41,810
So I to find my reducers folder and open up the reducer post file.

48
00:03:42,050 --> 00:03:46,820
So you recall that inside of your are state object was an object.

49
00:03:46,880 --> 00:03:52,100
It really is an object where the key is where the idea of individual posts.

50
00:03:52,250 --> 00:03:56,010
And then the values were the actual posts themselves.

51
00:03:57,170 --> 00:04:02,000
So I think that for right now maybe we will just leave the reducer as is and will come back in just

52
00:04:02,000 --> 00:04:07,460
a second once we are really sure that we can create a post and get a response back from the back end

53
00:04:07,460 --> 00:04:08,720
API.

54
00:04:08,720 --> 00:04:15,770
Ideally we're going to get the post that gets returned from the API and inserted into our state object.

55
00:04:15,800 --> 00:04:20,480
The reason I want to come over here right now is I want to just point out to you I want you to just

56
00:04:20,480 --> 00:04:28,070
recall that right now as it stands this request object which presumably returns a post we can't just

57
00:04:28,070 --> 00:04:34,130
take the values object right here and put it directly into our state array because the values object

58
00:04:34,430 --> 00:04:36,860
does not yet have an ID associated with it.

59
00:04:36,920 --> 00:04:41,480
So we can't really just arbitrarily throw something into our state object because we don't have any

60
00:04:41,480 --> 00:04:44,150
idea to associate with this particular post.

61
00:04:45,940 --> 00:04:46,630
All right.

62
00:04:46,630 --> 00:04:49,020
So now we've got our action creator put together.

63
00:04:49,120 --> 00:04:51,620
Let's change back to our Post's new file.

64
00:04:51,850 --> 00:04:53,820
So here's post-New.

65
00:04:54,040 --> 00:04:58,840
We're going to go up to the top of the file and up here we're going to go through the usual steps for

66
00:04:58,840 --> 00:05:01,400
calling an action creator from this file.

67
00:05:01,420 --> 00:05:04,880
We'll start off by importing the connecting paper from re-act redux.

68
00:05:04,990 --> 00:05:08,310
And then we will import our action creator that we just created.

69
00:05:08,620 --> 00:05:19,390
So import connect from reactor redux and then import create post from dot dot.

70
00:05:19,650 --> 00:05:23,670
Actions and actions by itself is just fine.

71
00:05:23,680 --> 00:05:25,590
We don't need to put index on there.

72
00:05:26,560 --> 00:05:31,720
OK Snel usual task will go down to the bottom file and hook up the connect helper.

73
00:05:31,720 --> 00:05:37,390
And when we go down to the bottom however we're going to see something a little bit interesting ha.

74
00:05:37,720 --> 00:05:45,430
So if you recall redux form is already being used in the exact same style as our connect helpers so

75
00:05:45,430 --> 00:05:48,610
how do we combine these two different helpers together.

76
00:05:48,610 --> 00:05:53,250
How do we somehow get this really weird syntax right.

77
00:05:53,260 --> 00:05:58,420
The weird syntax where we call connecter recall redux form and then put the second set of parentheses

78
00:05:58,420 --> 00:06:00,010
with posts new.

79
00:06:00,490 --> 00:06:06,130
We can do so by really just kind of mimicking the same type of syntax but layering up these different

80
00:06:06,130 --> 00:06:07,560
helpers.

81
00:06:08,260 --> 00:06:10,630
So I'm going to write in front of post-New.

82
00:06:10,640 --> 00:06:14,660
I'm going to put a new line and then a newline right after it like so.

83
00:06:15,070 --> 00:06:19,060
So you should see redux form the opening set of friends.

84
00:06:19,270 --> 00:06:23,840
The closing set of friends and the set of friends around post-New.

85
00:06:24,480 --> 00:06:31,650
So inside of here will place our connect call still say no and then the second set of friends for post-New

86
00:06:32,650 --> 00:06:34,930
and for the second argument will do.

87
00:06:34,930 --> 00:06:35,340
Create.

88
00:06:35,340 --> 00:06:37,620
Post the action creator.

89
00:06:38,350 --> 00:06:42,000
So this is how we stack up multiple connect like helpers.

90
00:06:42,370 --> 00:06:43,690
We take connect.

91
00:06:43,780 --> 00:06:46,940
As usual this writes to this statement right here.

92
00:06:46,960 --> 00:06:53,470
It does return a react component and so that is a valid input into the redux form helper.

93
00:06:53,800 --> 00:06:59,900
So the result of this gets put in as the second set of parentheses for the redux form helper.

94
00:07:02,370 --> 00:07:05,290
OK so I think we're about ready to give this a shot.

95
00:07:05,300 --> 00:07:07,220
By wiring up the action creator.

96
00:07:07,400 --> 00:07:14,630
Let's go back up to on submit and go back up to smit right here and the last thing we have to do is

97
00:07:14,630 --> 00:07:15,880
call that auction creator.

98
00:07:15,890 --> 00:07:21,620
So say this Propst create post and we'll just pass in our values.

99
00:07:23,670 --> 00:07:25,990
Ok I think we're about ready for a test inside the browser.

100
00:07:25,980 --> 00:07:31,520
Now I'm going to change back over a refresh the page and in my chrome console.

101
00:07:31,530 --> 00:07:37,020
I'm also going to pull up my network tab so I can to make sure I'm filtering by ex-aide char requests

102
00:07:37,020 --> 00:07:37,600
right now.

103
00:07:37,800 --> 00:07:44,310
So I really hope to see a post request being issued to our back in API as soon as we click that submit

104
00:07:44,310 --> 00:07:45,490
button.

105
00:07:45,490 --> 00:07:56,070
So put in a title of my post will say as a category of javascript and this is my post so I'll submit

106
00:07:56,520 --> 00:08:06,020
and OK so it looks like I get two requests on here the first request let me get some space in here.

107
00:08:06,050 --> 00:08:07,100
Well there we go.

108
00:08:08,530 --> 00:08:10,150
So we look at the first request.

109
00:08:10,240 --> 00:08:17,170
You'll notice it has a request method of options and options type request is used whenever we are making

110
00:08:17,170 --> 00:08:19,890
it cross Orjan resource sharing type requests.

111
00:08:19,900 --> 00:08:25,480
And really that's a fancy term for just saying that we are making an Ajax request that's going from

112
00:08:25,480 --> 00:08:33,100
local host ADHD to a completely different domain of Heroku app dot com Kross Orjan resource sharing

113
00:08:33,130 --> 00:08:39,520
or course for short is a security feature that is present inside of your user's browser to present or

114
00:08:39,520 --> 00:08:44,750
to prevent malicious type code from making requests to other domains.

115
00:08:44,770 --> 00:08:49,870
There's a ton of documentation online on course your quest if you're at all curious about them and exactly

116
00:08:49,870 --> 00:08:52,290
what the role of his options request is.

117
00:08:52,630 --> 00:08:57,690
So we really care about is the second request which was the post request.

118
00:08:57,760 --> 00:09:00,920
So looks like we got back a status code of 201 created.

119
00:09:01,150 --> 00:09:07,900
And if I click on the preview tab I see my category is content title and most importantly I have an

120
00:09:07,960 --> 00:09:09,490
ID as well.

121
00:09:10,000 --> 00:09:12,700
So looks like the post was successfully created.

122
00:09:12,730 --> 00:09:14,090
That's definitely good.

123
00:09:14,590 --> 00:09:21,370
If we go back to the index page now the instant we go back to the index page the index page will refed

124
00:09:21,380 --> 00:09:25,650
that's our list of posts and we can now see the new post appear on the screen.

125
00:09:25,840 --> 00:09:31,180
Now it looks like everything is working but there's one very awkward piece of this flow.

126
00:09:31,180 --> 00:09:32,640
You'll notice that.

127
00:09:33,040 --> 00:09:34,510
Let's do another post.

128
00:09:37,480 --> 00:09:39,050
So I'll clear up my log here.

129
00:09:39,050 --> 00:09:40,380
All submit and.

130
00:09:40,410 --> 00:09:40,830
OK.

131
00:09:40,840 --> 00:09:42,380
Looks like it was created as well.

132
00:09:42,730 --> 00:09:47,770
But when I click Submit right here my intent or what I would really like to have happen is to make sure

133
00:09:47,770 --> 00:09:52,680
that my user gets redirected automatically back to our list of posts.

134
00:09:52,750 --> 00:09:58,360
So we need to somehow make sure that once the post has been created we actually navigate the user somewhere

135
00:09:58,360 --> 00:09:59,500
else.

136
00:09:59,500 --> 00:10:03,900
So to take a quick break and figure out how to take care of that navigation in the next section.