WEBVTT 00:00.320 --> 00:00.740 Okay. 00:00.740 --> 00:02.390 What we have at the moment is very limited. 00:02.720 --> 00:06.080 I mean, it's a counter anyway, so it's always going to have limited functionality. 00:06.080 --> 00:11.300 But supposing we wanted another button where we could increment by a certain amount, we would need 00:11.300 --> 00:15.140 to send something extra to our Redux store along with the action. 00:15.140 --> 00:19.010 So as well as the type of action that we send, we can also send a payload. 00:19.010 --> 00:23.840 And we can do that inline inside the counter reducer if we wanted to. 00:23.870 --> 00:29.480 But let's take a look at another bit of Redux terminology that you may come across, which is an action 00:29.480 --> 00:30.170 creator. 00:30.170 --> 00:36.740 And these are really just convenience functions that make it slightly easier to use our Redux functionality 00:36.740 --> 00:38.360 inside our components. 00:38.360 --> 00:44.450 So I would say, for instance, I would export a function and let's say it's called increment for the 00:44.450 --> 00:45.350 first one. 00:45.410 --> 00:49.490 And this increment function would take an argument. 00:49.490 --> 00:50.810 Let's say it's an amount. 00:50.810 --> 00:54.500 And we could give it an initial value of one for instance. 00:54.500 --> 00:58.670 So that makes passing an argument to our increment function optional. 00:58.670 --> 01:01.040 If we don't pass it it's going to be set to one. 01:01.040 --> 01:07.340 If we do pass an argument, well it's going to be whatever that amount is and we can return from this. 01:07.340 --> 01:09.080 We can return the type. 01:09.080 --> 01:12.450 And that's going to be what we used before which is increments. 01:12.450 --> 01:15.990 And we can also return inside this object a payload. 01:15.990 --> 01:18.480 And we'll set that to the amount. 01:18.510 --> 01:24.360 And we would also do the same for the decrement function or action creator. 01:24.390 --> 01:27.810 I'll refer to this as and we could say decrement. 01:27.810 --> 01:30.180 And we'll keep the amount there as one as well. 01:30.180 --> 01:35.160 But just change the type to decrement and inside our action. 01:35.160 --> 01:39.060 Now because we have a payload as well. 01:39.060 --> 01:44.310 So as well as the type we would also specify the payload here. 01:44.670 --> 01:47.490 And this is going to be a type of number. 01:47.490 --> 01:52.110 And let's move this down because I'm going off the edge of the screen. 01:52.350 --> 01:56.670 So as well as the action type we've now got an action payload. 01:56.670 --> 02:04.230 So we could say that the data in the increment is the Statedata plus the action payload. 02:04.230 --> 02:10.440 And that's going to give us either one if they haven't provided an amount or the actual amount, depending 02:10.440 --> 02:11.940 on what that argument is. 02:11.970 --> 02:15.570 And we'll do the same for the decrement as well. 02:15.840 --> 02:17.580 So nothing too complicated here. 02:17.580 --> 02:22.560 These are really just helper functions that simplify the process of dispatching actions. 02:22.560 --> 02:29.100 And if we go back to our contact page, then currently we're passing this as an object full of type. 02:29.400 --> 02:37.440 But instead because we have exported our functions and these are named functions because we haven't 02:37.440 --> 02:39.630 said export default function. 02:39.630 --> 02:43.770 So we have to use this import by the name of the function. 02:43.770 --> 02:45.420 So I'll go back to the contact page. 02:45.420 --> 02:50.730 And inside here it's going to be decrement which we get from our counter reducer. 02:50.820 --> 02:57.210 And then because this is just a decrement function, we don't need to pass the parameter because we 02:57.210 --> 02:58.710 initialized it in the function. 02:58.710 --> 03:00.450 We'll do the same for the next one as well. 03:00.450 --> 03:02.850 We'll specify increment again. 03:02.850 --> 03:09.240 We don't need to pass any parameter to this, but I'm missing something and I'm missing the closing 03:09.240 --> 03:10.860 right parentheses there. 03:10.860 --> 03:14.160 So let's add a third button inside here. 03:14.160 --> 03:19.650 And for this one we'll just put an arbitrary number in there of five. 03:19.650 --> 03:24.660 And we'll just change the color of the button to primary in here. 03:24.660 --> 03:31.170 And we'll just say increment by five as the label for the button as well. 03:31.170 --> 03:34.840 So just an extra function to demonstrate this tiny bit of functionality. 03:34.870 --> 03:36.430 So let's go back to our browser. 03:36.430 --> 03:41.410 And our increment and decrement should still work exactly as they did before. 03:41.410 --> 03:46.150 But now we've got an increment by five, which does what you would expect it to do. 03:46.420 --> 03:48.010 It's now going up by five. 03:48.010 --> 03:50.110 So this is like really simple functionality. 03:50.140 --> 03:51.400 A counter is not exciting. 03:51.400 --> 03:57.760 It's really the Hello world version of how to use Redux, but I really did just want to start with the 03:57.760 --> 04:03.130 absolute basics with Redux, because as we move on to what we're about to look at, which is the Redux 04:03.130 --> 04:10.450 toolkit, then what we've looked at inside here in our counter reducer, some of this stuff happens 04:10.450 --> 04:16.900 behind the scenes, but really Redux Toolkit is a wrapper around this functionality. 04:16.900 --> 04:22.510 And Redux Toolkit is going to allow us to reduce the amount of boilerplate that we have in our code, 04:22.510 --> 04:27.040 but still give us the same or better I should say, functionality. 04:27.070 --> 04:32.500 So next, we're going to take a look at using Redux Toolkit to achieve the same as what we've done now, 04:32.500 --> 04:37.600 but it will be a bit less code to achieve the same functionality using that toolkit, and it will allow 04:37.600 --> 04:40.390 us to just warm up and get our hands dirty with that. 04:40.390 --> 04:42.910 And we'll take a look at that next.