1 00:00:02,110 --> 00:00:03,860 In the previous assignment, 2 00:00:03,910 --> 00:00:11,230 we added three new actions we can dispatch and we do dispatch them in our counter container, decrement, 3 00:00:11,440 --> 00:00:18,420 add and subtract. Now for add and subtract which we obviously handle in our reducer, 4 00:00:18,520 --> 00:00:27,670 it wouldn't make sense to also receive a payload, some additional data passed along with the action type 5 00:00:28,300 --> 00:00:33,270 because right now, we have hard coded +10 and -8 into the reducer 6 00:00:33,490 --> 00:00:40,300 but of course, in a lot of applications for example when creating a new blog post, you would get that 7 00:00:40,330 --> 00:00:47,680 information from your component, the input the user entered for example, the ID of the post the user clicked 8 00:00:47,680 --> 00:00:52,060 on, you can't hard code that into your reducer for that reason. 9 00:00:52,060 --> 00:00:59,080 So let's also say we don't want to hard code the value by which you want to add or subtract to the counter 10 00:00:59,260 --> 00:01:02,020 or from the counter into the reducer, 11 00:01:02,020 --> 00:01:10,210 instead we want to get this information along with the action, so we can easily implement this. On our 12 00:01:10,300 --> 00:01:11,790 action here, 13 00:01:11,860 --> 00:01:18,580 we are just dispatching a javascript object and only the type property is set in stone, 14 00:01:18,730 --> 00:01:24,620 so to say. We can obviously add more properties to that object, 15 00:01:24,670 --> 00:01:33,690 no one is stopping us from doing that, we can simply add a second property for example value or just V 16 00:01:33,730 --> 00:01:34,600 whatever you want, 17 00:01:34,600 --> 00:01:39,570 you could choose any name you want here and you can of course also add multiple properties. 18 00:01:39,570 --> 00:01:42,700 So I'll take value here, though 19 00:01:42,710 --> 00:01:50,020 what you also often see is just payload, payload could then itself be a javascript object which holds 20 00:01:50,080 --> 00:01:52,290 all the relevant payload to this action. 21 00:01:52,420 --> 00:01:54,550 But that's just something you often see, 22 00:01:54,550 --> 00:02:01,130 you can also skip the payload and just have a value and let's say that's ten and a name and that's Max, 23 00:02:01,180 --> 00:02:04,470 so you can add as many properties as you want. 24 00:02:04,550 --> 00:02:06,900 Now here, I'll add one which I'll name val, 25 00:02:06,940 --> 00:02:08,290 again the name is up to you 26 00:02:08,290 --> 00:02:10,940 and let's say we always want to add 10. 27 00:02:11,020 --> 00:02:17,730 And of course since we're inside the container, we could easily connect this to some input field 28 00:02:17,740 --> 00:02:23,990 we have. Now for subtract, I'll add val and let's say this is 15, 29 00:02:24,460 --> 00:02:29,910 so now I pass the value which I want to add or subtract along with the type 30 00:02:29,980 --> 00:02:35,690 and again, the type property is the only property you have to have where the name is not up to you. 31 00:02:35,740 --> 00:02:40,120 Now we can extract that value property in our reducer, 32 00:02:40,120 --> 00:02:45,480 so here for add and subtract, I no longer want to add 10 or subtract 8, 33 00:02:45,610 --> 00:02:55,600 instead here in the add if check, I'll simply add action.val and here the property name val is of 34 00:02:55,600 --> 00:02:59,670 course the property name I chose here in my counter container, in 35 00:02:59,750 --> 00:03:04,540 this object I pass in this action, so with the action I dispatch, 36 00:03:04,730 --> 00:03:11,330 val, and the same of course for subtracting, here I also simply use action.val. 37 00:03:11,450 --> 00:03:17,240 So I as a developer of course know what I named this property when I dispatched the action and I have 38 00:03:17,240 --> 00:03:23,830 to retrieve my value or the data which is relevant to me in the reducer from that same property name. 39 00:03:23,840 --> 00:03:27,320 Save all the files and get back to the application, 40 00:03:27,320 --> 00:03:30,850 now the labels are wrong here we're subtracting 15 actually 41 00:03:30,890 --> 00:03:33,410 but let's click the buttons to see if it works. 42 00:03:33,620 --> 00:03:41,840 Let's subtract and we subtract the 15 and we can't add 10 again because we set val to 10 for this button. 43 00:03:41,840 --> 00:03:48,980 So let's quickly update the caption on the other button so that it doesn't say subtract 8, but instead that it simply 44 00:03:48,980 --> 00:03:51,000 says subtract 15 45 00:03:51,110 --> 00:03:56,660 and now our application is 100% up to date. Now though and that's important, 46 00:03:56,690 --> 00:04:04,040 passing a payload with the action, passing some additional data and not just passing the type.