1
00:00:00,210 --> 00:00:00,600
Beautiful.

2
00:00:00,900 --> 00:00:08,760
And once we're done setting up our component, the former select component, let's set up the global

3
00:00:08,760 --> 00:00:15,120
handle change function, which essentially will work every time we update one of the inputs.

4
00:00:15,480 --> 00:00:20,970
So as we change something in the input, we'll also automatically update each state.

5
00:00:21,420 --> 00:00:27,340
Now, before we continue with me, just mention that throughout the video, we will rely heavily on

6
00:00:27,340 --> 00:00:32,490
the fact that in your script, we can update object keys dynamically.

7
00:00:32,850 --> 00:00:38,580
And if you're not familiar with that, please reference this video in my address nuggets because I don't

8
00:00:38,580 --> 00:00:41,790
want to be too annoying and repeat stuff too many times.

9
00:00:42,000 --> 00:00:47,700
So eventually, in our reducer, we'll update the state of Iowa in such a way where there's going to

10
00:00:47,700 --> 00:00:53,240
be a name value and pass in the actual value of the property again.

11
00:00:53,490 --> 00:00:59,550
If you're not familiar with this approach, please watch the video that I provided over here and we

12
00:00:59,550 --> 00:01:04,890
will start with actions we want to create and will change action event in the app context.

13
00:01:05,250 --> 00:01:11,340
We'll create an oil change function, and as of this point, I'm not going to mention import export

14
00:01:11,610 --> 00:01:16,470
because at this point, I think that we're all on the same page where, yes, every time we create the

15
00:01:16,470 --> 00:01:21,090
action, we do want to import it in the app context as well as the producer.

16
00:01:21,600 --> 00:01:25,530
And that in the app context, we want to set up the function and we'll change.

17
00:01:25,830 --> 00:01:29,520
That is looking for two things looking for name and value.

18
00:01:29,790 --> 00:01:31,800
And yes, we'll set it up as an object.

19
00:01:32,190 --> 00:01:37,800
So we're expecting an object with two properties and then we'll dispatch this back channel change.

20
00:01:38,040 --> 00:01:43,710
And as far as the payload, well, pass both things to the traditional will say name and value.

21
00:01:43,980 --> 00:01:51,120
We export a function, so add it here and the value and then notice over here where we have handled

22
00:01:51,120 --> 00:01:51,780
job input.

23
00:01:52,500 --> 00:01:53,760
So we'll get it in.

24
00:01:53,760 --> 00:01:59,070
The AJAB will invoke the function every time we update the input.

25
00:01:59,400 --> 00:02:05,460
And as far as the value is now, it's going to be name equals, event target, not name or you can simply

26
00:02:05,460 --> 00:02:08,009
use the variable that we currently over there have.

27
00:02:08,280 --> 00:02:09,660
And the same goes for value.

28
00:02:10,169 --> 00:02:17,130
So from the job, we passed both of these things over here and then in the producer, like I said,

29
00:02:17,430 --> 00:02:20,040
we'll dynamically update that value.

30
00:02:20,280 --> 00:02:22,410
Now, why do we have this dynamic approach?

31
00:02:22,410 --> 00:02:26,100
Because we need to keep in mind that names will change for the input.

32
00:02:26,820 --> 00:02:35,040
But with this setup, we'll always update the correct property, so use the property name in order to

33
00:02:35,040 --> 00:02:36,000
access the property.

34
00:02:36,330 --> 00:02:39,870
And then when it comes to value, while we'll just set it equal to it.

35
00:02:40,080 --> 00:02:46,350
Again, if you're not familiar with dynamic object properties, please watch the video first, because

36
00:02:46,350 --> 00:02:49,800
in there I cover everything in much greater detail.

37
00:02:50,160 --> 00:02:54,780
So let's get cracking and guess let's go to actions first.

38
00:02:55,710 --> 00:03:02,160
We want to create our annual change, so my copy and paste, I mean, let me make a little bit of room.

39
00:03:02,670 --> 00:03:04,650
So a mission like this one, I'll delete.

40
00:03:05,130 --> 00:03:08,920
And let's just say handle and then underscore change.

41
00:03:08,940 --> 00:03:11,370
So that's going to be our global one one.

42
00:03:12,120 --> 00:03:13,860
We want to go to app context.

43
00:03:14,140 --> 00:03:17,480
And I think I'm going to do it right away in the reducer as well.

44
00:03:17,490 --> 00:03:19,650
Just so I don't forget or handle change.

45
00:03:20,430 --> 00:03:22,490
Let's copy this one in the reducer.

46
00:03:23,280 --> 00:03:25,620
OK, so OK, grab the handle change.

47
00:03:25,620 --> 00:03:28,650
Let's say it, and then we'll set up our function.

48
00:03:28,890 --> 00:03:33,660
Now it doesn't really matter where we place it, so I'm just going to place it after the update user.

49
00:03:34,260 --> 00:03:39,660
So all the way here, I'm going to go with my concert and I'm looking for a handle.

50
00:03:40,750 --> 00:03:46,360
Change function in here, I'm going to be expecting an object with two properties, value and a name,

51
00:03:47,140 --> 00:03:48,970
and that as far as the functionality.

52
00:03:49,180 --> 00:03:50,740
Well, let's invoke that dispatch.

53
00:03:51,130 --> 00:03:58,510
Let's say dispatch, we want to pass in our pipe and type in this case is going to be handled change.

54
00:03:58,840 --> 00:04:02,080
Now we also want to pass in the payload correct payload.

55
00:04:02,350 --> 00:04:06,730
And now let's set up the name and a value.

56
00:04:07,060 --> 00:04:10,300
Now, if you want to console.log it, you can definitely do so.

57
00:04:10,870 --> 00:04:15,940
I'll just leave it the way it is, but I do want to pass it down, so and I'll change.

58
00:04:16,209 --> 00:04:18,399
And now let's navigate to the job.

59
00:04:18,730 --> 00:04:19,899
Let's grab the function.

60
00:04:20,290 --> 00:04:26,650
So right after this one will go with another change and then let's keep on scrolling and where we have

61
00:04:26,650 --> 00:04:30,130
the handle job input instead of logging, we'll go with handle.

62
00:04:30,490 --> 00:04:32,500
And we're going to set up the change one.

63
00:04:32,680 --> 00:04:36,730
And as far as the powers for both of them, well, we have name and value.

64
00:04:37,090 --> 00:04:43,450
And the last step is setting up that reducer where again, first we'll import handle change.

65
00:04:43,750 --> 00:04:44,890
Yep, we have that.

66
00:04:45,250 --> 00:04:47,260
And then let's keep on scrolling.

67
00:04:47,830 --> 00:04:56,850
I mean, I can probably copy one of these conditions just so it can speed up the if action type and

68
00:04:56,920 --> 00:04:58,990
are looking for and all change.

69
00:04:59,910 --> 00:05:05,880
That's the action name we will return the state as it is, but as far as the update.

70
00:05:06,180 --> 00:05:11,250
Well, this is the case where I'm going to go with action dot payload name.

71
00:05:11,520 --> 00:05:16,140
So this will dynamically access the property based on the name.

72
00:05:16,380 --> 00:05:18,330
And yes, I do want to set up the value.

73
00:05:18,660 --> 00:05:23,010
So I'm going to go with action, payload and value.

74
00:05:23,790 --> 00:05:31,890
So once we save and navigate back to the browser, if I take a look at the components, what I should

75
00:05:31,890 --> 00:05:37,800
notice that each and every time we do something here in the inputs, we're actually updating the state

76
00:05:37,800 --> 00:05:38,160
as well.

77
00:05:38,160 --> 00:05:40,050
So let me go to my provider.

78
00:05:40,770 --> 00:05:47,640
And more specifically, I'm looking for the position company and all that, and I notice the moment

79
00:05:47,640 --> 00:05:52,020
I will type say position front, then what do you think is going to happen?

80
00:05:52,560 --> 00:05:53,400
So let's try it out.

81
00:05:53,560 --> 00:05:57,030
I'm going to go with front end and check it out.

82
00:05:57,450 --> 00:06:00,840
Now the position, property value is the front end.

83
00:06:00,840 --> 00:06:03,610
So we're going to go here with a Netflix.

84
00:06:03,990 --> 00:06:09,120
You'll also see the same deal, and now I can change my value for job location as well.

85
00:06:09,630 --> 00:06:10,590
So keep in mind.

86
00:06:11,480 --> 00:06:16,580
Again, we're talking about the default one that is going to be the user's location.

87
00:06:16,880 --> 00:06:21,260
But once I refresh, for example, by default, it's going to be here in Mexico.

88
00:06:21,500 --> 00:06:29,570
But if I want to change it, if let's say I'm going to go with Brazil, then yes, the state value will

89
00:06:29,570 --> 00:06:30,350
match that.

90
00:06:30,350 --> 00:06:30,890
Exactly.

91
00:06:31,250 --> 00:06:35,630
So let me open this one up and we have over here, Brazil.

92
00:06:35,720 --> 00:06:41,600
And the same is going to work with Select where we can pick any of these values, and then you'll notice

93
00:06:41,600 --> 00:06:45,440
that the actual value changes as well in the state.

94
00:06:45,800 --> 00:06:49,130
And then once I add everything as far as the inputs.

95
00:06:49,460 --> 00:06:56,240
So if we go back here with front end and then we're going to go to Netflix once we submit, we should

96
00:06:56,240 --> 00:07:02,870
see in the console, great job because we are providing all the values that we have the condition for.

97
00:07:03,350 --> 00:07:11,480
And with this in place now, we have a global annual change function that pretty much handles every

98
00:07:11,480 --> 00:07:15,740
time we update the input in the add job page.