1
00:00:00,570 --> 00:00:04,120
In last video I gave you a really challenging exercise.

2
00:00:04,130 --> 00:00:09,100
So if you had problems with this one don't sweat it because I couldn't even throw in some stuff here

3
00:00:09,110 --> 00:00:14,410
that would be a little bit challenging knowing only what we've gone over with the reaction so far.

4
00:00:14,420 --> 00:00:16,490
So let's go through a solution.

5
00:00:16,490 --> 00:00:21,560
We have this application rendered out over here right now that essentially does not do anything at present.

6
00:00:21,560 --> 00:00:24,630
The idea here is that we're going to display some counter variable.

7
00:00:24,830 --> 00:00:29,450
And each time a user clicks on increments we should see that current count increased by one and each

8
00:00:29,450 --> 00:00:35,390
time they click on decrement we should see the current count decrease by one the entire redux side.

9
00:00:35,390 --> 00:00:40,430
This application has already been put together and most of the Riak side has as well.

10
00:00:40,430 --> 00:00:45,010
So all we really have to do is somehow get react and redux to play together nicely.

11
00:00:45,050 --> 00:00:50,640
So in practice that really comes around adding some arguments to the connect function that you see down.

12
00:00:50,660 --> 00:00:54,410
You're right in front of their rapt counter variable.

13
00:00:54,410 --> 00:01:00,530
The first we need to do is get some state out of our redux store that is defined down here and show

14
00:01:00,560 --> 00:01:04,630
some state or show some property inside of our counter component.

15
00:01:04,640 --> 00:01:11,920
So to do so I'm going to define a new function right above wrapped counter called Map state to prop's

16
00:01:12,670 --> 00:01:13,340
remember.

17
00:01:13,460 --> 00:01:19,220
This is going to be a function that is called with our entire state objects from redux.

18
00:01:19,340 --> 00:01:26,880
Then inside there are going to return an object that has a property count and then the value of that

19
00:01:26,910 --> 00:01:29,230
is going to be state count.

20
00:01:29,250 --> 00:01:33,220
Now that right there States count that was big challenge number one.

21
00:01:33,240 --> 00:01:39,030
If you look at the store that we defined down here inside of the store definition is the combined reducers

22
00:01:39,030 --> 00:01:39,990
call.

23
00:01:39,990 --> 00:01:45,330
So I've got a reducer right there that reducer is assigned to the Count property.

24
00:01:45,330 --> 00:01:50,430
So that means that when ever our redux store comes to life it's going to have a property on it state

25
00:01:50,430 --> 00:01:52,070
object called specifically.

26
00:01:52,110 --> 00:01:56,130
Count them again was Challenge number 1.

27
00:01:56,190 --> 00:02:01,420
So now inside of map stage props we're going to pull off that state property from the state object and

28
00:02:01,460 --> 00:02:06,890
we're going to put together this object right here and this object we want to show up as props inside

29
00:02:06,890 --> 00:02:08,550
of our component.

30
00:02:08,550 --> 00:02:12,900
So I'm going to now take the map state to prop's function and pass it as the first argument to the connect

31
00:02:12,900 --> 00:02:13,710
function.

32
00:02:14,060 --> 00:02:21,950
So I'll say map states to prop's like so now I still see a current count right here of 0.

33
00:02:21,980 --> 00:02:26,900
That's because even though we've now passed that thing off to our wrapped counter right here we now

34
00:02:26,900 --> 00:02:31,070
need to make sure that we received the props object inside this component and then make use of some

35
00:02:31,070 --> 00:02:33,080
of the different properties that are on there.

36
00:02:33,110 --> 00:02:35,700
So I'm going to receive the props object.

37
00:02:35,840 --> 00:02:40,610
It's going to have a count property because that is what we are returning from that stage props.

38
00:02:40,620 --> 00:02:47,150
So now inside of my span rather than having the hardcoded zero I will replace it with Rops count like

39
00:02:47,150 --> 00:02:51,300
so now we still see 0 over there.

40
00:02:51,300 --> 00:02:55,980
A very easy way that we could test to make sure that we actually have stuff wired up correctly would

41
00:02:55,980 --> 00:03:00,460
be to change the default value that gets returned from the reducer right here.

42
00:03:00,600 --> 00:03:07,580
So I could find where the count starts off as a default of 0 and replace it with say 10 like so.

43
00:03:07,580 --> 00:03:10,320
And now I see that I have current count of 10.

44
00:03:10,410 --> 00:03:14,910
We still don't have the ability to change that number but we at least can confirm that we are pulling

45
00:03:14,910 --> 00:03:18,510
data out of our redux store and showing it inside the reaction to it.

46
00:03:18,510 --> 00:03:24,150
Now I am going to return the default count value to zero because the test that powered this exercise

47
00:03:24,180 --> 00:03:28,550
expect to see a initial value here of zero Okay.

48
00:03:28,580 --> 00:03:33,470
Now the next thing we need to do is make sure that anytime someone clicks on these buttons we call inappropriate

49
00:03:33,500 --> 00:03:37,520
action create or an attempt to change our state or to action.

50
00:03:37,520 --> 00:03:40,320
Creators are listed up above the component right here.

51
00:03:40,340 --> 00:03:42,790
They are called increment and decrement.

52
00:03:42,890 --> 00:03:47,900
So we need to take these two action creators and pass them inside of an object to the second argument

53
00:03:47,900 --> 00:03:49,280
of the connect function.

54
00:03:49,980 --> 00:03:51,720
So here here's the connect function right here.

55
00:03:51,740 --> 00:03:58,070
I'm going to put in a comma and then I'll put in an empty object like so I'm going to add an increment

56
00:03:58,160 --> 00:04:04,370
is the increment action creator and decrement is the deck Romit action creator.

57
00:04:04,460 --> 00:04:09,590
And again if we wanted to we could easily shorten this up with a little bit of yes 20:15 syntax to be

58
00:04:09,590 --> 00:04:16,850
simply sacrament and increment and if you do so make sure that you still have a comma between the two.

59
00:04:16,900 --> 00:04:21,830
So now because we added in these action creators inside of an object that was passed the second argument

60
00:04:21,830 --> 00:04:27,880
of connect our props object is now going to have two additional properties.

61
00:04:27,920 --> 00:04:31,840
It's going to have an increment function and a decrement function.

62
00:04:31,880 --> 00:04:36,320
So we want to make sure that we call those two functions whenever a user clicks on either the increment

63
00:04:36,320 --> 00:04:39,040
button or the decrement bank button.

64
00:04:39,050 --> 00:04:43,670
So on my first button right here I'm going to add in an on click event handler.

65
00:04:43,980 --> 00:04:45,810
Anytime that someone clicks on that button.

66
00:04:45,920 --> 00:04:52,280
I'm going to call prop's dot increment and notice that I did not put a set of parentheses on here.

67
00:04:52,280 --> 00:04:57,020
I don't need any parentheses because I don't want to call this action creator or this callback right

68
00:04:57,020 --> 00:04:59,580
here when the button is first rendered.

69
00:04:59,750 --> 00:05:04,550
If you put on the parentheses the button is going to be or is that function will be called right away

70
00:05:04,730 --> 00:05:05,990
when the counter function.

71
00:05:05,990 --> 00:05:09,740
Or you need to count component actually gets rendered to the screen and that's not what we want.

72
00:05:09,740 --> 00:05:15,740
We want to pass a reference to this callback function to on click so that it can be called at some point

73
00:05:15,740 --> 00:05:18,280
in time in the future.

74
00:05:18,350 --> 00:05:22,670
Then on my second button I'm going to add on an on click as well.

75
00:05:22,700 --> 00:05:28,610
And whenever someone clicks on this button I'm going to call Rops dot decrement like so

76
00:05:33,130 --> 00:05:38,530
I guess that should be it we should now be able to click on these buttons and see the number go up and

77
00:05:38,530 --> 00:05:41,410
I should be able to click on Dickerman and see the number go down as well.

78
00:05:42,390 --> 00:05:44,070
So that's pretty much the solution like I said.

79
00:05:44,090 --> 00:05:49,460
It was challenging because I kind of made to kind of think outside a little box in a couple locations.

80
00:05:49,460 --> 00:05:54,690
First off wasn't super clear on how you got the current count piece of states.

81
00:05:54,700 --> 00:06:00,050
Now I also have not really told you yet how we pass multiple actions into a single component or multiple

82
00:06:00,050 --> 00:06:02,110
action creators into a single component.

83
00:06:02,330 --> 00:06:06,830
If we have multiple action creators we're just going to add all them to the object that we pass to the

84
00:06:06,830 --> 00:06:09,200
second argument of the connect function.

85
00:06:10,730 --> 00:06:16,250
All right so I'm going to now check my solution.

86
00:06:16,440 --> 00:06:17,380
And there we go.

87
00:06:17,380 --> 00:06:19,080
Looks like everything was done correctly.

88
00:06:19,200 --> 00:06:21,020
So hopefully you had some success here.

89
00:06:21,020 --> 00:06:23,370
I hope it wasn't too frustrating to go through.

90
00:06:23,460 --> 00:06:24,580
Let's take a pause right here.

91
00:06:24,600 --> 00:06:28,350
When we come back the next video we're going to start working on a little bit more challenging project.