1
00:00:00,640 --> 00:00:06,510
In the last section we put together our survey new component as a reminder the survey news job is to

2
00:00:06,510 --> 00:00:12,150
show the survey form and the survey form review and kind of toggle the visibility between the two so

3
00:00:12,150 --> 00:00:16,860
that the user thinks that they first fill out the form and then go on to reviewing all their import

4
00:00:16,950 --> 00:00:20,610
input Susie inputs in the survey form review.

5
00:00:21,240 --> 00:00:24,450
However we don't have either of these components put together just yet.

6
00:00:24,450 --> 00:00:28,620
So there's really not a large lot of logic for us to wire up inside of survey new.

7
00:00:28,750 --> 00:00:32,790
So I'm thinking that we'll probably just pause working on survey new for a little bit.

8
00:00:32,820 --> 00:00:37,460
We'll put together these two components and then we'll come back to the thing and wiring it up.

9
00:00:37,500 --> 00:00:38,520
So let's get to it.

10
00:00:38,520 --> 00:00:44,370
We'll start off by making our survey form and putting a little boiler plate inside of there back inside

11
00:00:44,370 --> 00:00:45,250
my code editor.

12
00:00:45,260 --> 00:00:51,750
I need to find my source components surveys directory and I'll make a new file called survey form.

13
00:00:51,780 --> 00:00:53,730
J.S..

14
00:00:54,130 --> 00:00:58,720
Now like I just said we want to get some boilerplate for a class based component in here.

15
00:00:58,900 --> 00:01:03,290
We just put together all the boilerplate for a class based component inside of survey new however.

16
00:01:03,340 --> 00:01:09,520
So rather than retype all that I think we should just copy all this change back over to survey form

17
00:01:10,090 --> 00:01:11,800
and paste it all in here.

18
00:01:11,860 --> 00:01:17,610
So now my survey form has a bunch of boilerplate code for a re-act component.

19
00:01:17,800 --> 00:01:22,440
Of course it still has a bunch of references to the survey a new component all over the place.

20
00:01:22,540 --> 00:01:27,840
So let's update each of those to say survey form instead we've got one up here.

21
00:01:27,830 --> 00:01:29,410
The class title.

22
00:01:29,410 --> 00:01:31,550
We've got one inside of our render method.

23
00:01:31,900 --> 00:01:34,840
And then one down at the export default statement as well.

24
00:01:36,630 --> 00:01:39,720
Finally we'll change back over to the survey new component.

25
00:01:39,780 --> 00:01:46,170
So now here is survey a new survey new we will import the survey form and then show it inside of here

26
00:01:46,730 --> 00:01:49,050
because remember that's the entire purpose of survey new.

27
00:01:49,080 --> 00:01:52,100
It wants to show the survey form.

28
00:01:52,100 --> 00:01:57,540
So back in Servais new We'll put our import statement for survey form

29
00:02:00,960 --> 00:02:03,180
and then we will show it inside the render method.

30
00:02:05,120 --> 00:02:05,880
Survey form.

31
00:02:05,900 --> 00:02:06,650
There we go.

32
00:02:08,580 --> 00:02:12,620
OK let's test the sound inside the browser make sure we didn't make any mistakes.

33
00:02:12,660 --> 00:02:18,180
I will wait for the automatic refresh to kick in and I should see the text survey form appear on the

34
00:02:18,180 --> 00:02:19,410
screen.

35
00:02:20,130 --> 00:02:25,260
Now I know that the terminology that we're working with right now like survey a new survey form really

36
00:02:25,260 --> 00:02:28,070
feels quite identical and it's very confusing.

37
00:02:28,380 --> 00:02:33,390
Unfortunately you know in production applications we really want to have components that belong together

38
00:02:33,390 --> 00:02:35,670
to be at least somewhat named similarly.

39
00:02:35,730 --> 00:02:41,670
So even though I'm seeing these words and it probably sounds confusing when you read the component names

40
00:02:41,730 --> 00:02:43,210
it's a lot more reasonable.

41
00:02:43,260 --> 00:02:46,970
So if you just read to yourself survey form and survey new.

42
00:02:47,130 --> 00:02:49,250
Yeah they're two separate components of course.

43
00:02:49,350 --> 00:02:55,290
But when I start saying survey new survey form survey new survey form Yeah it's more confusing.

44
00:02:55,290 --> 00:03:00,090
Just to make sure that we don't make any further mistakes at the very top of the survey new component

45
00:03:00,420 --> 00:03:10,830
are going to put a little comment that says survey new shows survey form and survey form reveal just

46
00:03:11,010 --> 00:03:12,910
a little reminder to myself.

47
00:03:13,140 --> 00:03:16,730
And then inside of the survey form we'll put a comment in here as well.

48
00:03:16,950 --> 00:03:23,820
Survey form shows a form for a user to add input like so.

49
00:03:24,270 --> 00:03:24,480
OK.

50
00:03:24,480 --> 00:03:28,440
So hopefully now we've got these little comments just to remind ourselves about the difference between

51
00:03:28,440 --> 00:03:30,170
these two components.

52
00:03:30,300 --> 00:03:35,280
Now let's stick inside of survey form which is where we're going to be doing a lot of work inside of

53
00:03:35,280 --> 00:03:35,940
survey form.

54
00:03:35,940 --> 00:03:42,310
I first want to get a little bit of experience hooking this component up to the redux form library.

55
00:03:42,600 --> 00:03:47,970
So we're going to import statement at the very top of this file that's going to import a little helper

56
00:03:47,970 --> 00:03:54,240
from redux form and allow us to tell redux form that it needs to be in control of any forms that is

57
00:03:54,240 --> 00:03:57,430
inside of that are inside of this component.

58
00:03:57,510 --> 00:04:00,690
So the top will add on an import statement.

59
00:04:00,690 --> 00:04:08,090
We're going to import one function from the redux foreign library called redux form and we'll get that

60
00:04:08,090 --> 00:04:11,630
from redox dash form.

61
00:04:11,690 --> 00:04:17,000
Now again the redux foreign library it exports multiple different values multiple functions multiple

62
00:04:17,000 --> 00:04:17,810
objects.

63
00:04:17,810 --> 00:04:23,510
So we make sure that we use our curly braces to say hey we want this one specific exported value from

64
00:04:23,510 --> 00:04:32,300
redux form the redux form helper right here is what allows redux form to communicate with our redux

65
00:04:32,390 --> 00:04:33,860
store.

66
00:04:33,860 --> 00:04:38,930
So recall that in a couple sections ago when we had a little bit of the backstory on redux form and

67
00:04:38,930 --> 00:04:45,980
what it does for us we had said that redux form takes care of calling action creators it takes care

68
00:04:46,010 --> 00:04:50,440
of pulling data out of our store and providing it to other components for us.

69
00:04:50,450 --> 00:04:56,630
So clearly redux form does have to be in charge or have the ability to communicate with our retail store

70
00:04:56,630 --> 00:05:03,160
at the top of our application this redux form helper can be thought of as being nearly identical to

71
00:05:03,160 --> 00:05:06,790
the connect helper that we've been using from the re-act redux library.

72
00:05:06,850 --> 00:05:12,700
So the redux form function right here allows our component to communicate with the read store at the

73
00:05:12,700 --> 00:05:16,770
top of our application that is enclosed by that provider tag.

74
00:05:16,930 --> 00:05:22,630
So we set up way long ago the redux form function right here is so similar to the connect function.

75
00:05:22,630 --> 00:05:28,030
In fact that it is wired up to our component with the exact same method signature.

76
00:05:28,090 --> 00:05:31,260
So we're going to say redux form down here at the bottom.

77
00:05:31,430 --> 00:05:37,450
We'll put down one set of empty parentheses and then a second set around our component.

78
00:05:37,450 --> 00:05:45,000
Now that's kind of where the similarities end between connect and redux Sunia redux forum redux form.

79
00:05:45,010 --> 00:05:51,310
Rather than taking a couple of different arguments it only takes one single argument that contains a

80
00:05:51,310 --> 00:05:56,590
couple of different options that we will want to use to customize how our form behaves.

81
00:05:56,590 --> 00:06:01,540
So I just added in an empty javascript object right here and then I added a new line so we can easily

82
00:06:01,540 --> 00:06:03,650
add in a property to it.

83
00:06:03,790 --> 00:06:10,420
The redux form helper only requires one option to be passed inside this object and that property or

84
00:06:10,420 --> 00:06:13,710
that option is called for.

85
00:06:14,110 --> 00:06:20,760
Now we're going to give this thing a form value of survey form for right now.

86
00:06:20,820 --> 00:06:25,350
I would love to tell you the purpose of this property but right now we're going to just kind of let

87
00:06:25,350 --> 00:06:26,750
this thing sit for a little bit.

88
00:06:26,790 --> 00:06:27,440
OK.

89
00:06:27,510 --> 00:06:32,160
We're going to come back to this property right here and we'll talk about what its purposes.

90
00:06:32,190 --> 00:06:37,860
As soon as we start adding text to our actual form or at least once we can start typing in our form

91
00:06:37,860 --> 00:06:39,420
and get some text to actually show up.

92
00:06:39,520 --> 00:06:39,700
OK.

93
00:06:39,720 --> 00:06:41,750
So we'll come back to this option right here.

94
00:06:41,820 --> 00:06:46,230
But right now we're just going to take a pause on it and we'll just forget that it exists.

95
00:06:46,230 --> 00:06:46,610
OK.

96
00:06:46,650 --> 00:06:49,160
So that's pretty much it for setting up redux form.

97
00:06:49,230 --> 00:06:53,860
We are now have the ability to make use of it inside of our component as we wish.

98
00:06:54,030 --> 00:06:55,950
But of course why do we actually use it for it.

99
00:06:55,950 --> 00:06:56,720
How do we use it.

100
00:06:56,760 --> 00:06:58,990
Still a little bit of stuff to figure out here.

101
00:06:59,070 --> 00:07:00,490
So let's take a quick pause.

102
00:07:00,510 --> 00:07:05,820
When we come back we'll figure out how we make use of redux form inside of our survey form component.

103
00:07:05,820 --> 00:07:07,320
So Acia in just a second.