1
00:00:00,950 --> 00:00:02,850
We've now got our two fields put together.

2
00:00:02,870 --> 00:00:07,230
So we're now going to start to pivot our attention to handling submission of this form.

3
00:00:07,250 --> 00:00:11,450
Remember at some point in time the user is going to want to click a button to actually create a stream

4
00:00:11,690 --> 00:00:14,470
or do whatever it is the form is supposed to do.

5
00:00:14,510 --> 00:00:18,230
We're going to first begin by approaching this problem in the same way that we have handled the form

6
00:00:18,230 --> 00:00:23,740
submission in the past and then we're going to very quickly refactor it to use redux form as well.

7
00:00:23,780 --> 00:00:30,180
So I'm going to put together a little helper method inside my class called on submit and remember anytime

8
00:00:30,210 --> 00:00:33,690
that this thing gets called You'll be called with a event object.

9
00:00:33,770 --> 00:00:40,460
Usually we want to call something like event or prevent default on that object to keep it from attempting

10
00:00:40,460 --> 00:00:45,530
to refresh the browser as the browser tries to submit the form to some back end server that doesn't

11
00:00:45,530 --> 00:00:47,660
actually exist in this case.

12
00:00:47,660 --> 00:00:52,550
So again this is what we usually do but now that we are using redux form things are going to be just

13
00:00:52,610 --> 00:00:53,920
a little bit different.

14
00:00:54,170 --> 00:01:00,500
So as a quick reminder just a little bit ago we did a console log inside of our render method of this

15
00:01:00,500 --> 00:01:01,720
stock drops.

16
00:01:01,730 --> 00:01:02,960
I'm going to test that out again.

17
00:01:02,960 --> 00:01:06,620
I'm going to save this and we're going to take a look at that prop's object really quickly one more

18
00:01:06,620 --> 00:01:07,200
time.

19
00:01:08,090 --> 00:01:10,650
So back inside my browser Here's my prop's object.

20
00:01:10,650 --> 00:01:15,540
And as before we see that there are a tremendous number of methods or excuse me properties added to

21
00:01:15,540 --> 00:01:21,420
that prop's object I'll bite redux form if you look inside if you're going to see that there's one particular

22
00:01:21,420 --> 00:01:24,420
property right here called handle submit.

23
00:01:24,450 --> 00:01:29,220
So this is a function that we are supposed to call any time that the form gets submitted.

24
00:01:29,220 --> 00:01:32,330
This function is provided by redux form.

25
00:01:32,430 --> 00:01:33,180
You'll see what it does.

26
00:01:33,180 --> 00:01:34,370
In just a moment.

27
00:01:34,500 --> 00:01:39,960
It's a lot easier to just kind of show you what this does rather than give you a kind of unclear definition.

28
00:01:39,960 --> 00:01:43,740
So let's just write out some code here and you'll very quickly understand what's going on.

29
00:01:44,170 --> 00:01:44,480
OK.

30
00:01:44,490 --> 00:01:48,990
So I'm going to delete the counsel log and then going to find the form element right here and I'm going

31
00:01:48,990 --> 00:01:51,870
to add on the on submit Propp like so.

32
00:01:51,870 --> 00:01:55,350
Now here's where things get interesting to submit.

33
00:01:55,350 --> 00:02:01,530
Usually we would pass an on submit our callback right here but now that we are using redux form things

34
00:02:01,530 --> 00:02:03,400
are going to be just a bit different.

35
00:02:03,420 --> 00:02:04,960
So to on submit.

36
00:02:05,190 --> 00:02:06,670
I'm going to pass this.

37
00:02:06,690 --> 00:02:15,050
Prop stock handles submit and then into that I'm going to pass my this on submit function like so.

38
00:02:15,070 --> 00:02:18,230
So a lot of very similar terminology going on right here.

39
00:02:18,250 --> 00:02:20,330
Let's just very quickly go over that block.

40
00:02:20,620 --> 00:02:26,320
So we have on submit that is the name of the prop that we are passing down to the form if we pass a

41
00:02:26,320 --> 00:02:32,170
function called are osme if we have a function on the on Samit Propp down into the form the function

42
00:02:32,170 --> 00:02:38,120
we called any time that the form gets submitted then inside of here we first have this prop's not handle

43
00:02:38,150 --> 00:02:39,020
Samit.

44
00:02:39,040 --> 00:02:43,100
This is a callback function that is provided to our component by redux form.

45
00:02:43,240 --> 00:02:48,280
We then call that function with all recall back method that we defined inside of our component right

46
00:02:48,280 --> 00:02:49,400
here.

47
00:02:49,550 --> 00:02:55,740
And when we go through this entire process it's going to change exactly how on Samake It's called internally.

48
00:02:55,740 --> 00:03:01,400
When ever this form gets submitted now handle Smit is going to automatically receive that event object

49
00:03:01,580 --> 00:03:04,520
and automatically call prevent default for us.

50
00:03:04,520 --> 00:03:08,480
That is something that's really tedious for us to have to do a redux form just takes care of it for

51
00:03:08,480 --> 00:03:09,410
us.

52
00:03:09,680 --> 00:03:11,600
So we don't have to call that anymore.

53
00:03:11,870 --> 00:03:16,160
In fact on Samit it's not even going to be called with an event object at all.

54
00:03:16,160 --> 00:03:22,200
Instead it's going to be called with whatever values existed inside of our two field inputs.

55
00:03:22,250 --> 00:03:27,470
So usually we might refer to this argument right here as something like form props now form prop's does

56
00:03:27,470 --> 00:03:31,080
not mean that this is some data passed down by a parent component.

57
00:03:31,150 --> 00:03:35,110
Maybe a better name this argument here would be something like safe form values.

58
00:03:35,180 --> 00:03:38,260
Let's stick with that right now just make things a little bit more clear.

59
00:03:38,450 --> 00:03:44,700
So let's console log out those form values agile very quickly get a good idea of what's going on here.

60
00:03:44,700 --> 00:03:50,160
Now Leslie I want to do very quickly inside the form I'm going to put in a button with the class name

61
00:03:50,220 --> 00:03:52,260
of UI button primary

62
00:03:54,960 --> 00:03:59,630
and I'll give this thing some text like Samit.

63
00:03:59,640 --> 00:04:02,140
All right let's flip back over and we'll test out really quickly.

64
00:04:02,250 --> 00:04:05,060
So enter in some title and some description.

65
00:04:05,100 --> 00:04:07,990
Then when I click on submit there's my council log.

66
00:04:08,100 --> 00:04:11,620
So I've got the title and the description that were entered into the form.

67
00:04:11,820 --> 00:04:16,080
No longer are we dealing with some event object as our argument right here.

68
00:04:16,090 --> 00:04:19,380
The object is really not useful to us one bit.

69
00:04:19,380 --> 00:04:24,030
The only reason we ever dealt with the event object was so that we could call that present default method.

70
00:04:24,030 --> 00:04:29,220
So now this on Samit callback rather than getting the useless event object is going to be called with

71
00:04:29,310 --> 00:04:33,930
all the values out of our form inside of an object and that's going to make it really easy for us to

72
00:04:33,930 --> 00:04:39,990
take those form values now and save them on some API or validate or whatever it is we want to do with

73
00:04:39,990 --> 00:04:40,400
them.

74
00:04:41,290 --> 00:04:41,560
All right.

75
00:04:41,560 --> 00:04:45,220
So that's pretty much it on how we handle forms submission with redux form.

76
00:04:45,250 --> 00:04:50,680
Again we reference handle Samit and then we pass in whatever callback we want to run after the form

77
00:04:50,680 --> 00:04:51,800
gets submitted.

78
00:04:51,820 --> 00:04:54,410
So in reality handles submit is going to be called.

79
00:04:54,550 --> 00:04:59,440
And then once it processes the form event and all that kind of good stuff our callback then gets invoked

80
00:04:59,650 --> 00:05:02,530
with our actual form values that you and I care about.

81
00:05:02,530 --> 00:05:02,760
All right.

82
00:05:02,770 --> 00:05:03,710
This looks pretty good.

83
00:05:03,820 --> 00:05:09,370
Now one little thing I want to point out here if I refresh the browser and I just click on submit right

84
00:05:09,370 --> 00:05:15,180
away I still get my submission event even though I did not enter a title in a description.

85
00:05:15,220 --> 00:05:19,780
The chances are that you and I do not want people to be able to create a stream that does not have a

86
00:05:19,780 --> 00:05:21,390
title and a description.

87
00:05:21,400 --> 00:05:26,890
So I think that before we allow a user to submit this form we should really be validating these text

88
00:05:26,890 --> 00:05:27,650
inputs.

89
00:05:27,850 --> 00:05:29,060
So let's take a pause right here.

90
00:05:29,080 --> 00:05:33,100
When we come back the next section we're going to learn how we can validate some text inputs with redux

91
00:05:33,100 --> 00:05:33,460
form.