1
00:00:00,540 --> 00:00:05,690
In the last section we found that whenever we filled out the form went to the review form and then clicked

2
00:00:05,690 --> 00:00:06,720
on the back button.

3
00:00:06,830 --> 00:00:10,490
All of our inputs somehow got cleared out automatically.

4
00:00:10,490 --> 00:00:13,540
So this is actually believe it or not a feature.

5
00:00:13,550 --> 00:00:19,940
And yes I say feature of redux form redux form assumes that whenever your form component is unmounted

6
00:00:19,970 --> 00:00:25,340
or no longer being rendered on the screen that means that the form values that it was keeping track

7
00:00:25,340 --> 00:00:27,680
of or maintaining are no longer relevant.

8
00:00:27,710 --> 00:00:29,710
And so it dumps all of them from memory.

9
00:00:30,080 --> 00:00:34,970
In reality that actually makes a lot of sense because you can imagine that if we're using a form to

10
00:00:35,000 --> 00:00:40,490
create some record and save it to the server after a user clicked on like maybe a save but right here

11
00:00:40,550 --> 00:00:46,310
and we kick the user back over to some list of records or any you know basically any other type of page

12
00:00:46,640 --> 00:00:51,890
and then if the user came back to this form to create a new record the user would expect to see a completely

13
00:00:51,890 --> 00:00:53,990
blank and pristine form.

14
00:00:54,230 --> 00:00:59,390
So that's definitely a more common use case of forms in general as opposed to this kind of leave the

15
00:00:59,390 --> 00:01:03,830
form and then come back to it and still see all the values in there like what we're doing right now

16
00:01:03,830 --> 00:01:05,740
is probably not quite as common.

17
00:01:05,960 --> 00:01:11,590
So redux forum helps you with the more common case but it makes our case just slightly more challenging.

18
00:01:11,600 --> 00:01:18,050
Now it's a slightly more challenging and I mean very very slightly redux form 100 percent acknowledges

19
00:01:18,050 --> 00:01:22,970
that at times you might want to leave the form and come back to it and still see all the values in here.

20
00:01:22,970 --> 00:01:28,200
So we make it really easy to have all the values stick around inside my code editor.

21
00:01:28,340 --> 00:01:30,970
I'm going to find the survey form component.

22
00:01:31,280 --> 00:01:35,690
So the survey form component remember this is what is responsible for actually showing the form to the

23
00:01:35,690 --> 00:01:41,410
user as the first component that we see at the very bottom of this file.

24
00:01:41,540 --> 00:01:43,850
We're making use of the redux form helper.

25
00:01:43,940 --> 00:01:50,990
So here's the redux form helper this redux form helper is what initialises and configures the survey

26
00:01:50,990 --> 00:01:52,850
form that we're about to work on.

27
00:01:52,940 --> 00:01:57,710
Also by the way do recall I said awhile ago that we would talk about what this form property here was

28
00:01:57,710 --> 00:01:59,250
and yes we're going to get to that very soon.

29
00:01:59,260 --> 00:02:00,920
So I haven't forgotten.

30
00:02:00,920 --> 00:02:08,030
Now there's one additional option we can pass to the redux forum help right here called destroy on unmount

31
00:02:09,020 --> 00:02:10,800
and I bet you can guess what that does.

32
00:02:11,000 --> 00:02:17,570
So if we say destroy on an amount of true which in it is true by default then redux form is going to

33
00:02:17,630 --> 00:02:19,270
kill this form that we're working on.

34
00:02:19,310 --> 00:02:23,390
Any time the survey form is unmounted or no longer shown on the screen.

35
00:02:23,690 --> 00:02:28,400
But if we say false then that means hey I don't care if this component goes away I don't care if the

36
00:02:28,400 --> 00:02:30,360
survey form is no longer being rendered.

37
00:02:30,380 --> 00:02:31,970
Don't try to destroy that form.

38
00:02:31,970 --> 00:02:35,060
Don't dump the values keep the values around.

39
00:02:35,060 --> 00:02:42,310
So if we save this now we flip back over and wait for the refresh.

40
00:02:42,310 --> 00:02:50,210
Put in some dummy inputs and then click on next then back all the values are still here because we told

41
00:02:50,210 --> 00:02:54,970
redux form hey we understand this component's about to go away but don't try to get rid of the values

42
00:02:54,970 --> 00:02:56,280
and inside of it.

43
00:02:56,280 --> 00:02:59,580
So now our users can freely go back and forth between the two.

44
00:02:59,750 --> 00:03:04,280
And in theory once we show all the inputs here on the screen and allow them to review their inputs they

45
00:03:04,280 --> 00:03:08,690
should be able to have a very easy time to flip back over here and decide oh you know what maybe I want

46
00:03:08,690 --> 00:03:11,960
to slightly change the email body or something like that.

47
00:03:12,520 --> 00:03:12,890
OK.

48
00:03:12,920 --> 00:03:16,520
So now we are back on the survey review screen.

49
00:03:16,760 --> 00:03:21,050
That means that we want to make sure that we actually show all the different inputs to the user.

50
00:03:21,170 --> 00:03:26,690
And you know like who said give them the ability to actually review the inputs that they've added.

51
00:03:26,690 --> 00:03:32,930
So we're going to change back into the survey for survey form review components a tongue twister.

52
00:03:32,930 --> 00:03:33,740
Here we are right here.

53
00:03:33,770 --> 00:03:39,320
So again this is responsible for showing the inputs or the values to the user.

54
00:03:39,320 --> 00:03:45,020
Now two things we have to do we have to first off figure out how we get access to all of our values

55
00:03:45,050 --> 00:03:49,910
from those different inputs on that previous component inside of here and then we have to figure out

56
00:03:49,910 --> 00:03:51,690
how to actually render them on the screen.

57
00:03:51,920 --> 00:03:56,810
Now step two showing them you know in this component is certainly not the most challenging thing in

58
00:03:56,810 --> 00:04:03,170
the world but getting access to the the those values inside of here certainly is a little bit more challenging.

59
00:04:03,170 --> 00:04:06,800
Now we did talk a little bit about how we're going to do this in the past.

60
00:04:06,800 --> 00:04:10,440
And you'll recall that this was kind of one of the big reasons that we were going to use redux form

61
00:04:10,460 --> 00:04:11,160
at all.

62
00:04:11,510 --> 00:04:16,910
So we had previously said that we had all these different survey fields components they would be making

63
00:04:16,910 --> 00:04:20,140
changes they would be changing something inside the redux store.

64
00:04:20,360 --> 00:04:25,060
And then we would use Reebok's to communicate those values down into the survey form or view.

65
00:04:25,100 --> 00:04:27,940
And that is still exactly what we're going to do.

66
00:04:27,950 --> 00:04:32,930
Remember we had this big long discussion about why we're using redox to hold all these values.

67
00:04:32,930 --> 00:04:38,120
We're using redox to hold all the inputs or all the values coming out of these survey fields so that

68
00:04:38,120 --> 00:04:42,610
we can easily communicate them over to the survey form of view component.

69
00:04:42,620 --> 00:04:46,910
We'd also said that we are making use of redux for him specifically because having to create all those

70
00:04:46,910 --> 00:04:50,140
action creators and all that stuff by hand is a pain in the rear.

71
00:04:50,210 --> 00:04:54,490
And so we would just let redux form go ahead and do it for us.

72
00:04:54,770 --> 00:05:00,430
So we have to get Vout some data out of our redux store into our survey form of component.

73
00:05:00,780 --> 00:05:07,600
Now we are using redux form but redux form doesn't actually make pulling data out of the store any easier.

74
00:05:07,610 --> 00:05:12,020
So we're still going to use the connect helper to take care of all that stuff for us.

75
00:05:12,020 --> 00:05:16,760
Okay so we're still going to use the connect helper to reach into the redux store from the survey form

76
00:05:16,760 --> 00:05:19,520
of view and pull out all the different form values.

77
00:05:19,760 --> 00:05:22,680
So let's take care of that right now.

78
00:05:23,030 --> 00:05:30,330
Back inside of survey form of view we're going to import the Kinect helper from the re-act redux library

79
00:05:30,900 --> 00:05:36,200
and then we'll wired up to our component at the bottom with our two sets of parentheses.

80
00:05:36,510 --> 00:05:41,400
Now remember how we use the connect function right here to pull values out of our Reebok store.

81
00:05:41,400 --> 00:05:45,700
We always define that map state to prop's function.

82
00:05:45,840 --> 00:05:51,240
And I can't say it enough the name of the function is not important just by convention we usually call

83
00:05:51,240 --> 00:05:56,490
it map state to prop's because that is more or less what it's doing it's taking our redux state and

84
00:05:56,490 --> 00:06:04,170
kind of transforming them into some props to send down to the component and let's make sure not to forget

85
00:06:04,350 --> 00:06:07,180
to pass in as the first argument to connect as well.

86
00:06:07,680 --> 00:06:12,810
So now inside of here remember Matt said to prop's is called with our entire state object out of the

87
00:06:12,810 --> 00:06:17,460
redux store and then we're going to return some value inside of here.

88
00:06:17,640 --> 00:06:21,120
That will be added as props to the component.

89
00:06:21,120 --> 00:06:27,660
Now the first question I have is how are we going to actually get access to the form values which are

90
00:06:27,660 --> 00:06:30,640
presumably stored inside the state object right here.

91
00:06:30,640 --> 00:06:32,920
We haven't really spoken about that too much.

92
00:06:32,940 --> 00:06:34,870
I think that may be a good first step.

93
00:06:34,890 --> 00:06:39,930
Let's just cancel out the state object and kind of explore it and see what we're working with.

94
00:06:39,930 --> 00:06:46,020
Remember we wired up a producer from redux form to our store.

95
00:06:46,110 --> 00:06:51,660
So presumably there's some little piece of steak in here or some slice of state that is being managed

96
00:06:51,660 --> 00:06:52,800
by redux form.

97
00:06:52,890 --> 00:06:57,410
And I kind of expect to see that all of our different form values are stuffed in there somewhere.

98
00:06:57,600 --> 00:07:00,240
But I don't know what that property name is often in my head.

99
00:07:00,240 --> 00:07:06,380
So let's take a look at it and see what we're dealing with now to get that cost Lague to pop up where

100
00:07:06,390 --> 00:07:09,210
you have to fill out the form one more time.

101
00:07:09,300 --> 00:07:13,260
So I'll put my dummy inputs in a click next.

102
00:07:13,260 --> 00:07:15,690
And there's our console log.

103
00:07:15,810 --> 00:07:21,060
So when we do our consulate remember the top level keys here correspond to all the different keys inside

104
00:07:21,060 --> 00:07:22,930
of our combined reducers call.

105
00:07:23,230 --> 00:07:27,890
And so we've got the author douceur and the former douceur being provided by redux form.

106
00:07:27,930 --> 00:07:32,810
And so of course in this case we care about this form piece of state when we expand it.

107
00:07:32,820 --> 00:07:35,360
We'll see that it is an object of its own.

108
00:07:35,580 --> 00:07:37,890
Here's some key called survey form.

109
00:07:37,920 --> 00:07:40,070
It has another object inside of there.

110
00:07:40,530 --> 00:07:45,810
Inside of that object is a couple more properties the other is a lot of stuff in here and inside of

111
00:07:45,810 --> 00:07:51,990
there is the values object which contains all the actual values that we want to make access to inside

112
00:07:51,990 --> 00:07:52,930
of our component.

113
00:07:53,210 --> 00:07:53,430
OK.

114
00:07:53,430 --> 00:07:59,960
So clearly the form values that we want to have are user review exist inside of the state object and

115
00:07:59,970 --> 00:08:01,080
to get access to those.

116
00:08:01,080 --> 00:08:03,600
We refer to states dot form.

117
00:08:03,610 --> 00:08:05,120
Whoops sorry.

118
00:08:05,210 --> 00:08:12,870
It's expand that data back out make access to state DOT form dot survey form dot values and that's where

119
00:08:12,870 --> 00:08:15,480
all of our different form values sit.

120
00:08:15,480 --> 00:08:18,480
Now one last thing before we actually go in.

121
00:08:18,490 --> 00:08:19,890
Why are all that stuff up.

122
00:08:19,890 --> 00:08:25,050
Notice how one sided the form piece of state here the mummy dial size up really quick make sure it's

123
00:08:25,050 --> 00:08:28,140
really clear inside of that formed piece of state.

124
00:08:28,170 --> 00:08:33,420
You'll see that all of the fields and all these different things that we really care about correspond

125
00:08:33,420 --> 00:08:38,880
to this survey form key right here survey form.

126
00:08:38,880 --> 00:08:43,130
So kind of feels like that he came out of magic or like out of you know who knows where.

127
00:08:43,410 --> 00:08:49,020
Well as you might imagine if we flip back over to our survey form component where we had that redux

128
00:08:49,020 --> 00:08:53,230
form help or at the very bottom that was the purpose of the form name.

129
00:08:53,610 --> 00:08:56,920
So we put the form name in here of survey form.

130
00:08:57,120 --> 00:09:03,510
That is what tells redux form how to correctly manage or kind of how to name space all the values for

131
00:09:03,510 --> 00:09:08,280
this very particular form inside of our application inside of the form reducer.

132
00:09:08,310 --> 00:09:13,740
So the reason that we have to provide this form name right here and kind of sectioned off all the different

133
00:09:13,740 --> 00:09:19,760
form values inside of the form reducer is that we might have many different forms inside of our application.

134
00:09:19,760 --> 00:09:21,150
And so we have many different forms.

135
00:09:21,150 --> 00:09:24,330
We don't want all their values to kind of conflict or hit each other.

136
00:09:24,330 --> 00:09:30,090
We want to have these nice little siloed areas where the survey form has its own set of fields its own

137
00:09:30,090 --> 00:09:35,550
set of values its own set of whatever else those other things are as well.

138
00:09:35,550 --> 00:09:37,520
Now this is both a blessing and a curse.

139
00:09:37,560 --> 00:09:38,700
You know arsing and take that back.

140
00:09:38,700 --> 00:09:39,780
Its only a blessing.

141
00:09:39,900 --> 00:09:46,530
Its only a blessing because by allowing us to access all these different values on this name of survey

142
00:09:46,530 --> 00:09:52,860
form it means that we could create other form components give them a name or a form value right here

143
00:09:52,950 --> 00:09:58,390
of survey form and all of a sudden they would be sharing the same set of values.

144
00:09:58,650 --> 00:10:02,940
Now thats actually really important because that would make putting together a true wizard form or a

145
00:10:02,940 --> 00:10:03,430
true life.

146
00:10:03,450 --> 00:10:08,190
Step by step or page by page form really easy to put together.

147
00:10:08,250 --> 00:10:13,590
Now going a little bit off topic so let's kind of bring it back to our actual problem at hand.

148
00:10:14,010 --> 00:10:18,460
We want to get access to all those values inside of the survey form or view component.

149
00:10:18,630 --> 00:10:19,830
So I'm back inside of there.

150
00:10:19,830 --> 00:10:23,070
Here's the map stage props function that we were just working on.

151
00:10:23,100 --> 00:10:28,020
I'm going to clean up the console log and then inside of the return object right here.

152
00:10:28,050 --> 00:10:32,350
Which remember is going to end up as props on our components.

153
00:10:32,460 --> 00:10:42,850
We will say that the form values from our form are coming from state DOT form dot survey form dot values.

154
00:10:43,190 --> 00:10:46,850
And so this entire path right here is coming from.

155
00:10:46,890 --> 00:10:51,410
Again this object state DOT formed out survey form values.

156
00:10:51,870 --> 00:10:58,250
So form values as we are passing it as a prop into our component is going to be this object right here.

157
00:10:58,290 --> 00:11:04,380
So it's now going to be up to us to somehow print or display all these values inside of the component

158
00:11:06,020 --> 00:11:07,670
get.

159
00:11:07,800 --> 00:11:13,650
So I think that right now let's take a quick break and when we come back we're going to receive this

160
00:11:13,650 --> 00:11:19,920
form values object inside of our survey form a view component as a prop and we'll make sure that we

161
00:11:19,920 --> 00:11:23,270
all somehow get displayed or printed out onto the screen.

162
00:11:23,280 --> 00:11:25,730
So let's take care of that in the next section.