1
00:00:00,470 --> 00:00:05,390
In the video we created a new create stream action creator and then imported that along with the connect

2
00:00:05,400 --> 00:00:08,050
function to our stream create component.

3
00:00:08,040 --> 00:00:11,110
So now we need to somehow wire up this action creator to our component.

4
00:00:11,210 --> 00:00:16,890
But as we just saw it's going to be a little bit challenging to hook up both the connect function and

5
00:00:16,950 --> 00:00:18,900
redux form to this component.

6
00:00:18,900 --> 00:00:24,180
So in Honestly in all honesty here we can absolutely do it but this syntax is going to look just a little

7
00:00:24,180 --> 00:00:25,260
bit nasty.

8
00:00:25,340 --> 00:00:28,470
So to do so we could call connect right here.

9
00:00:28,470 --> 00:00:35,830
Place one set of parentheses and then wrap the entire statement all the way from the opening part of

10
00:00:35,830 --> 00:00:39,040
redux form to the very end inside of another set of parentheses.

11
00:00:39,040 --> 00:00:41,300
So there's the opening one and there's the closing one.

12
00:00:41,320 --> 00:00:43,060
This would work out totally fine right here.

13
00:00:43,150 --> 00:00:46,150
But very frankly we will use a slightly modified syntax.

14
00:00:46,170 --> 00:00:48,820
So let me show you another way that we could write this out.

15
00:00:48,820 --> 00:00:54,460
I want to remove the export default statement right there and I'm going to instead create a new variable

16
00:00:54,460 --> 00:00:58,120
called form wrapped like so.

17
00:00:58,150 --> 00:01:04,010
So the idea here is that we were making a form wrapped version of our stream create component and then

18
00:01:04,010 --> 00:01:10,070
now at the bottom of the file we could put a another export default statement place or connect function

19
00:01:10,340 --> 00:01:14,170
and then pass in form wrapped like so.

20
00:01:14,190 --> 00:01:19,000
So that's how we can very easily stack up additional kind of nasty looking functions like this without

21
00:01:19,030 --> 00:01:21,250
ending up with some crazy syntax.

22
00:01:21,610 --> 00:01:26,400
So now getting back on track here we do not yet have a map state to prop's function but could pass in

23
00:01:26,470 --> 00:01:37,530
null as the first argument and then as a second argument I'll put in my action creator of the stream.

24
00:01:37,590 --> 00:01:43,840
Now finally inside of my component itself or find the on submit function and each time that the user

25
00:01:43,840 --> 00:01:50,110
Smit's the form I'm going to make sure that I call this stop prop's dot stream or I forgot the name

26
00:01:50,110 --> 00:01:50,840
of it.

27
00:01:50,890 --> 00:01:51,950
Great stream there we go.

28
00:01:54,370 --> 00:01:58,540
Reate stream and we will call it with all of our foreign values.

29
00:01:58,580 --> 00:02:03,590
It's now whenever the user tries to estimate the form we're going to validate the inputs if the inputs

30
00:02:03,590 --> 00:02:09,770
are valid we will call on submit on Sammet is going to call our action creator of create stream that's

31
00:02:09,770 --> 00:02:13,730
going to run the Create stream action creator right here and we're going to attempt to make a request

32
00:02:13,970 --> 00:02:19,310
over to our API server and create a new stream and we know that this is going to create a stream because

33
00:02:19,310 --> 00:02:20,950
we are following restful conventions.

34
00:02:20,960 --> 00:02:24,440
We are making a post request to slash streams.

35
00:02:24,440 --> 00:02:24,670
All right.

36
00:02:24,680 --> 00:02:30,150
So going to save all this and then recall that we had stopped our server to do a new install.

37
00:02:30,170 --> 00:02:34,840
Back over here and you know what I'm actually looking at the new install We forgot one little stepper.

38
00:02:34,840 --> 00:02:35,890
I forgot to step here.

39
00:02:35,960 --> 00:02:37,800
We forgot to wire up redux thunk.

40
00:02:37,820 --> 00:02:39,890
Let's do that really quickly.

41
00:02:39,890 --> 00:02:46,090
While we do that let's start our server up as well with NPM start OK so well that goes I'm going to

42
00:02:46,090 --> 00:02:50,700
flip back over to my roots index such as file.

43
00:02:50,750 --> 00:02:53,140
So here's the root index file.

44
00:02:53,300 --> 00:02:57,980
Remember inside here we had already set up the applied middle where we call in anticipation of wiring

45
00:02:57,980 --> 00:03:01,130
up redux thunked So this is going to be really easy at the top.

46
00:03:01,130 --> 00:03:07,840
I'm going to import redux thunk from redux dasht thunk and then I will make sure that I pass that into

47
00:03:07,850 --> 00:03:10,130
the applied middleware call right here redux.

48
00:03:10,240 --> 00:03:13,100
Thank all.

49
00:03:13,140 --> 00:03:15,740
All right let's flip back over to our application.

50
00:03:15,780 --> 00:03:16,270
Here we are.

51
00:03:16,270 --> 00:03:20,890
I see my form on the screen so now I'm going to pull up in my network request log.

52
00:03:21,090 --> 00:03:27,060
I'm going to filter by S.H. H.R. requests and I'll enter in some stream names so how about like my stream

53
00:03:27,480 --> 00:03:33,970
and I'll give it a description or something like this is a great stream and then I'll submit.

54
00:03:33,990 --> 00:03:36,840
All right so we see a little nasty error message here.

55
00:03:36,930 --> 00:03:39,370
But I bet you can guess why we see this one.

56
00:03:39,390 --> 00:03:39,980
Yeah.

57
00:03:40,040 --> 00:03:41,230
Hold traditional.

58
00:03:41,430 --> 00:03:48,130
We've got a callback function that we are passing off to a component and we did not bind it.

59
00:03:48,240 --> 00:03:51,080
So let's make sure that we defined this with an arrow function.

60
00:03:51,090 --> 00:03:53,340
Now I'll be honest with you I did not plan this error.

61
00:03:53,340 --> 00:03:55,070
I plan on the one around render input.

62
00:03:55,080 --> 00:03:56,250
When we ran into it.

63
00:03:56,250 --> 00:04:01,190
But this is just an example of how often you tend to run into this stuff unfortunately.

64
00:04:01,200 --> 00:04:03,610
All right let's save this flip back over again.

65
00:04:03,710 --> 00:04:05,180
I'll say my stream.

66
00:04:05,550 --> 00:04:07,400
This is a great stream.

67
00:04:07,620 --> 00:04:08,740
And then I'll submit it.

68
00:04:09,090 --> 00:04:11,240
And now I see two requests appear right here.

69
00:04:11,250 --> 00:04:13,450
I see an options request which is totally fine.

70
00:04:13,530 --> 00:04:18,090
And then I see a post request that just you know the options request right there is because we are making

71
00:04:18,090 --> 00:04:21,380
requests to a server that is running on a different port.

72
00:04:21,390 --> 00:04:23,840
This is related to corps request errors.

73
00:04:23,850 --> 00:04:29,790
If you are a court enforcement policy if you've ever taken a look at core's errors before so it looks

74
00:04:29,790 --> 00:04:34,200
like Course is working successfully here and we've got our post request that is returning a status of

75
00:04:34,210 --> 00:04:37,580
201 which indicates that our stream was successfully created.

76
00:04:37,810 --> 00:04:42,870
So now we can check to see if that stream was actually made or not to do so.

77
00:04:43,170 --> 00:04:50,190
I can go back over in a new terminal window to the API directory that we had just created with that

78
00:04:50,190 --> 00:04:52,230
DBI just on file.

79
00:04:52,230 --> 00:04:59,820
Now if you are on a Mac OS or a Linux based system you can run cat D-B Jaison and that will print out

80
00:04:59,820 --> 00:05:05,280
the contents of that file and now you'll see that the API server has automatically added a new record

81
00:05:05,520 --> 00:05:08,080
to that file under the streams key.

82
00:05:08,100 --> 00:05:11,720
This is our stream and it is automatically assigned an idea of one.

83
00:05:11,730 --> 00:05:16,230
Now if you are running on Windows and cannot use the cat command you can always start up your code editor

84
00:05:16,240 --> 00:05:21,060
inside this folder and inspect that file and just verify that the stream was created successfully.

85
00:05:21,390 --> 00:05:21,690
OK.

86
00:05:21,720 --> 00:05:22,410
That's pretty much it.

87
00:05:22,440 --> 00:05:27,210
Again because we have followed restful conventions we didn't have to look up complicated documentation

88
00:05:27,240 --> 00:05:28,100
or anything like that.

89
00:05:28,140 --> 00:05:33,090
We just made a post request to the appropriate end point and our record was created for us.

90
00:05:33,120 --> 00:05:34,850
So this is fantastic.

91
00:05:34,950 --> 00:05:41,110
Now that we have the ability to create new streams it's time for us to focus back on the original streamlets

92
00:05:41,130 --> 00:05:44,880
component and make sure that we can show a list of all the streams that have been created over here

93
00:05:44,910 --> 00:05:45,680
as well.

94
00:05:45,840 --> 00:05:51,480
But before we do let's also make sure that we start to put a little bit of thought into wrapping up

95
00:05:51,480 --> 00:05:53,730
our create stream action carried over here.

96
00:05:53,850 --> 00:05:56,820
So we got a couple of things that we're juggling simultaneously.

97
00:05:56,820 --> 00:05:59,500
Let's take a quick pause here and we'll continue in the next video.