1
00:00:00,800 --> 00:00:05,130
In the last section we started putting together our form that will be used to create a new employee

2
00:00:05,910 --> 00:00:11,070
will now work on us a little bit more by suddenly out some action creators and reduce her to handle

3
00:00:11,070 --> 00:00:14,820
changes to this form and all the values that it's going to produce.

4
00:00:14,820 --> 00:00:20,430
One thing I want to mention about forms in redux again is that it is really up to us whether or not

5
00:00:20,430 --> 00:00:24,000
we want to hold these values in our component levels state.

6
00:00:24,000 --> 00:00:29,730
So like you know by initializing our state and killing said state or by using application level state

7
00:00:29,940 --> 00:00:34,590
I'm going to make the claim that it's generally generally better to use redox level state.

8
00:00:34,590 --> 00:00:39,810
So you know do the whole process full of action creators reducers all that kind of good stuff just because

9
00:00:39,810 --> 00:00:45,720
it makes doing things like validation prepping the form with the initial values etc. all that kind of

10
00:00:45,720 --> 00:00:50,130
stuff a lot easier when your data is sitting at the app level state.

11
00:00:50,130 --> 00:00:55,770
So we're doing a little bit of extra work now for some big payoff later on in addition.

12
00:00:55,770 --> 00:00:59,540
Just one more quick aside if you've ever used library redux form.

13
00:00:59,580 --> 00:01:07,140
We are essentially doing more or less exactly what relax form does here by storing values on our application

14
00:01:07,140 --> 00:01:08,550
level state with redox.

15
00:01:08,640 --> 00:01:11,760
So really we're kind of doing the work of redux form here.

16
00:01:11,810 --> 00:01:12,270
We it's form.

17
00:01:12,270 --> 00:01:17,040
This also happens to include a bunch of helpers for making sure we don't have to write all the code

18
00:01:17,080 --> 00:01:19,080
and all of these action creators that we're going through.

19
00:01:19,080 --> 00:01:19,800
All right.

20
00:01:19,950 --> 00:01:21,620
And let's get started.

21
00:01:22,320 --> 00:01:29,400
Let's first make some action creators to handle a user changing the value of either the name or the

22
00:01:29,400 --> 00:01:30,110
phone number.

23
00:01:30,120 --> 00:01:32,310
So that's where we're going to start.

24
00:01:32,310 --> 00:01:37,530
I mean all of my action crater's file so actions index not J.S. and the load to sin here.

25
00:01:37,530 --> 00:01:42,910
Right now we've got we've got a bunch of actions related to authentication.

26
00:01:43,200 --> 00:01:49,590
And so it feels a little bit funky to start adding in some action creator specific to like this one

27
00:01:49,590 --> 00:01:54,900
very specific form next to something having to do with like signing a user in right.

28
00:01:54,960 --> 00:01:58,490
Putting all that stuff in one file feels just a little bit off.

29
00:01:58,500 --> 00:02:05,190
So I think that maybe would be well-served to create a new action create a file that will have just

30
00:02:05,190 --> 00:02:08,090
the actions related to dealing with employees.

31
00:02:08,190 --> 00:02:08,590
All right.

32
00:02:08,670 --> 00:02:13,230
I think one new file just to deal with employees would be a good idea.

33
00:02:13,230 --> 00:02:21,860
So in my actions folder and create a new file called employee actions we're going to make a separate

34
00:02:21,860 --> 00:02:26,140
file for all the actions related to authentication and a little bit too.

35
00:02:26,330 --> 00:02:28,920
But right now to stay focused on this form.

36
00:02:29,480 --> 00:02:31,510
So our farmers can have three fields to it.

37
00:02:31,610 --> 00:02:38,390
The email the phone and the shift we could create one action creator to handle a user editing each of

38
00:02:38,390 --> 00:02:40,700
those fields like we did with the loggin form.

39
00:02:40,790 --> 00:02:46,730
But I think that maybe you'd be a lot easier to just write one single action creator to handle update

40
00:02:46,880 --> 00:02:48,560
any update to the form whatsoever.

41
00:02:48,560 --> 00:02:53,370
So one arcsin creator any update to the forum.

42
00:02:53,600 --> 00:02:54,440
So let's try it out.

43
00:02:54,440 --> 00:02:57,980
I will create a new action creator called Let's do

44
00:03:01,720 --> 00:03:05,320
about employee form employee update.

45
00:03:05,770 --> 00:03:15,490
Now work and I'm going to assume that there's going to be called with two variables a prop and a value.

46
00:03:16,480 --> 00:03:22,450
So the idea here is that rather than making however many action creators for you know one for each different

47
00:03:22,450 --> 00:03:26,680
property that our form is going to create a different value that the form is going to create We're going

48
00:03:26,680 --> 00:03:30,670
to make just this one employee update action creator.

49
00:03:30,670 --> 00:03:38,200
Then whenever want to updates say the name I will call this thing with a prop of name and a value of

50
00:03:38,260 --> 00:03:39,800
whatever the new name is.

51
00:03:40,020 --> 00:03:46,510
If I want to update the shift I would call it with a prop of shift and the value of Monday or whatever

52
00:03:46,510 --> 00:03:47,950
days been selected.

53
00:03:47,950 --> 00:03:53,440
So one action creator that can update any different prop that is being that should exist inside our

54
00:03:53,440 --> 00:03:55,080
form.

55
00:03:55,080 --> 00:03:58,350
So inside of here we'll treat our action.

56
00:03:59,080 --> 00:04:02,830
I'll give it a type of employee update.

57
00:04:02,830 --> 00:04:09,400
I'm not I'm really not super happy with this type right here and the action clear name of employee update

58
00:04:09,400 --> 00:04:14,050
because it's just very closely related to the idea of saving an employee.

59
00:04:14,070 --> 00:04:19,840
Are you making a change or at it and saving it if we need to I think we'll come back and rename this

60
00:04:20,150 --> 00:04:21,520
you know do a little bit refactor.

61
00:04:21,550 --> 00:04:26,460
But for right now I can't quite think of a better term so we'll stick with this.

62
00:04:26,470 --> 00:04:31,020
So then on my pay load I'm going to pass the prop and the value.

63
00:04:31,410 --> 00:04:34,480
I do keep in mind that we're using a little bit of six year.

64
00:04:34,630 --> 00:04:40,950
So I'm expecting this this action creator will be called with an object containing a prop a value key

65
00:04:42,220 --> 00:04:48,380
and the payload that we return from this or the payload property will be an object containing a product

66
00:04:48,380 --> 00:04:50,520
key and the value key as well.

67
00:04:50,560 --> 00:04:53,350
So again just a little bit of the six here.

68
00:04:53,710 --> 00:04:55,890
I did throw in the type of employee update in here.

69
00:04:55,900 --> 00:05:00,130
So we need to create this type as well at the top we will import

70
00:05:02,540 --> 00:05:10,160
employee update from types and need to make sure that I actually create this type inside my types file

71
00:05:10,160 --> 00:05:11,470
as well.

72
00:05:12,500 --> 00:05:20,780
So I do export Konst employee update and remember the stream value here.

73
00:05:20,970 --> 00:05:23,570
Doesn't matter what it is it just has to be something unique.

74
00:05:23,570 --> 00:05:27,420
Against all the other types that I have.

75
00:05:27,420 --> 00:05:28,770
OK so this is looking good.

76
00:05:28,770 --> 00:05:34,190
We've now got an action creator that we can call to update presumably our form.

77
00:05:34,350 --> 00:05:39,960
We sought to make a reducer However So let's toss a producer together really quickly since we're definitely

78
00:05:39,960 --> 00:05:42,590
on a roll here in my reducers folder.

79
00:05:42,600 --> 00:05:49,500
I'll make a new file called employee form reducer

80
00:05:53,510 --> 00:05:57,560
and inside of here we will throw in some boilerplate just to get started.

81
00:05:57,560 --> 00:06:02,650
I will import the type that we just made while we're thinking about it.

82
00:06:06,050 --> 00:06:13,030
So I'll get my employee update type from the actions slash types file and we'll toss in some boilerplate

83
00:06:13,040 --> 00:06:14,960
for the actual reducer.

84
00:06:15,110 --> 00:06:24,140
So I'll start by initializing my state to an empty object and I'll export default a function that gets

85
00:06:24,140 --> 00:06:31,370
called with some in some states and I will default that to initial state and an action.

86
00:06:31,430 --> 00:06:38,570
And then again just the same thing every single time we put in our switch statement over action type

87
00:06:39,560 --> 00:06:40,780
by default.

88
00:06:41,030 --> 00:06:46,010
We're going to return our state like so again just absolute boilerplate.

89
00:06:46,010 --> 00:06:50,470
You can copy this chunk of code you know the the last half of this file right here from reduce your

90
00:06:50,470 --> 00:06:54,370
reducer and it's always going to be the exact same thing.

91
00:06:54,380 --> 00:06:54,830
All right.

92
00:06:54,830 --> 00:06:56,320
This is looking pretty good so far.

93
00:06:56,420 --> 00:06:59,550
Let's take a quick break and then start wiring up this reducer