WEBVTT 00:00.350 --> 00:06.740 Okay, now let's take a look at Redux Actions, which is how we effectively update our global state 00:06.740 --> 00:12.710 and then cause our component to reflect that change in the global state in the browser window. 00:12.710 --> 00:17.270 So we'll head back to VS code and let's go back to our counter reducer. 00:17.300 --> 00:22.730 Now one of the original complaints with Redux was that we needed to create a huge amount of boilerplate 00:22.730 --> 00:25.130 code to not do very much. 00:25.160 --> 00:30.710 And with Redux Toolkit, a lot of that boilerplate has been taken away from us. 00:30.710 --> 00:35.300 But for this particular example, we're going to add not too much boilerplate code. 00:35.300 --> 00:43.040 We'll still keep it fairly minimal, but the way that we typically use actions inside our reducers is 00:43.070 --> 00:46.700 we'll add the action as a second argument to the reducer function. 00:46.700 --> 00:51.770 So over here I'll specify a comma and then I'll specify an action. 00:51.800 --> 00:57.470 Now just to remove the warnings that we're going to get I'm going to give our action an inline type. 00:57.470 --> 00:59.240 So I'm going to specify a colon. 00:59.340 --> 01:00.720 open curly brackets. 01:00.720 --> 01:03.810 And our actions have a type property. 01:03.810 --> 01:06.150 And I'm going to specify a string. 01:06.390 --> 01:12.840 Now the way that this works is when we dispatch an action, we check what action type we're receiving. 01:12.840 --> 01:16.080 And just as a heads up, we're just going to create a very simple counter. 01:16.080 --> 01:19.620 And we're going to be able to increment and decrement. 01:19.650 --> 01:25.980 So one of the types that we're going to receive are action type is going to be an increment or decrement. 01:25.980 --> 01:28.170 And it's going to do what you expect it's going to do. 01:28.200 --> 01:33.030 Very simple example just to understand the concepts of Redux. 01:33.060 --> 01:38.220 So inside here the way we typically use this is we'd use a switch statement. 01:38.760 --> 01:42.840 And let's use the snippets that we get with VS code for a switch statement. 01:42.840 --> 01:44.280 So I'm going to select that. 01:44.370 --> 01:48.240 And then the switch parameter is what are we checking for. 01:48.240 --> 01:50.130 What are we going to switch on. 01:50.130 --> 01:53.520 And that's going to be in this case the action type. 01:53.520 --> 01:58.900 So we're going to check for an action with the type of increments. 01:59.380 --> 02:02.860 And inside this first case we're going to return. 02:02.890 --> 02:10.960 And in the case of a reducer function we need to return the new states. 02:10.990 --> 02:12.850 We don't modify this state. 02:12.850 --> 02:17.500 We don't say data is now 43 or data is data plus one. 02:17.530 --> 02:20.500 We take the original existing states. 02:21.070 --> 02:26.590 We make a copy of it or clone it to create a new state. 02:26.590 --> 02:29.530 And then that becomes the state after we've adjusted it. 02:29.530 --> 02:34.900 So the way that we would approach this is we'd open curly brackets after return, and we'd use the spread 02:34.900 --> 02:38.380 operator and we'd spread our existing state. 02:38.410 --> 02:46.450 Now, the spread operator that does not mutate data, this is going to create a new piece of state from 02:46.450 --> 02:49.990 the original state that we're using the spread operator on. 02:49.990 --> 02:55.420 So currently what we're doing here is we're spreading the properties, which is just one property, 02:55.420 --> 02:58.600 the data with a value of 42. 02:58.630 --> 03:00.520 And then below the comma. 03:00.520 --> 03:08.290 Here we can specify the data is going to be the state dot data plus one because we're incrementing. 03:08.320 --> 03:17.440 So what we return from this case is some new states with the updated data property below this one. 03:17.440 --> 03:20.080 Instead of default we're just going to have two cases here. 03:20.110 --> 03:23.740 We'll have a case for decrement as well. 03:23.770 --> 03:30.280 And I'm getting some errors here because I've put string in quotes for the type which is entirely incorrect. 03:30.280 --> 03:34.270 That needs to be the type of string, not type string in quotes. 03:34.270 --> 03:37.120 So that removes the errors that I'm seeing there. 03:37.150 --> 03:39.880 Okay, so for the decrement then fairly straightforward. 03:39.880 --> 03:42.490 What we're going to do here, we're going to do something very similar. 03:42.490 --> 03:49.990 We're going to return the state and then say that the data is state dot data minus one. 03:50.560 --> 03:54.070 And we also need a default case here as well. 03:54.070 --> 04:00.440 So we don't need the break because if we're returning, then that stops the execution of the switch 04:00.440 --> 04:00.920 statement. 04:00.920 --> 04:03.290 So we don't need a break statement here. 04:03.800 --> 04:10.220 And then for the default case we are just going to return the states. 04:10.310 --> 04:13.730 And we don't need the return states at the bottom. 04:13.730 --> 04:19.460 So when our component or when our application loads then our initial state, the data is going to be 04:19.460 --> 04:20.330 42. 04:20.360 --> 04:25.760 When our component loads, it's going to receive the states from the default case. 04:25.820 --> 04:33.470 And in the case that we dispatch an action to update our store, then we effectively call the counter 04:33.500 --> 04:34.670 reducer function. 04:34.670 --> 04:38.180 And then we either increment or decrement the state. 04:38.180 --> 04:41.660 So let's go back to our contact page and see how we use this. 04:41.660 --> 04:45.410 Now in this case we need to dispatch these actions. 04:45.410 --> 04:49.580 And there's another hook that we use from React Redux to help us with this. 04:49.580 --> 04:57.660 So I'm going to say const dispatch equals use dispatch and then just open parentheses. 04:57.660 --> 05:00.810 And then we've got access to this dispatch function. 05:01.290 --> 05:05.610 And below the typography let's just create or use material UI. 05:05.640 --> 05:10.740 Again we'll create a button group as we'll have a group of buttons here. 05:11.040 --> 05:13.140 And we'll specify button. 05:13.140 --> 05:16.200 And we'll give this one a color of just error. 05:16.200 --> 05:23.700 So it's red and we'll give it a label of decrements and we'll give it an onClick event. 05:24.150 --> 05:27.060 And for this one we want to dispatch an action. 05:27.060 --> 05:28.950 So I'm going to open parentheses. 05:28.980 --> 05:30.630 Then add the arrow. 05:30.630 --> 05:32.790 And we're going to say dispatch. 05:32.880 --> 05:36.570 And inside here we need to dispatch an action. 05:36.570 --> 05:39.690 So we open curly brackets because this goes as an object. 05:39.690 --> 05:46.650 And inside our reducer we've specified that the action is going to have a property of type. 05:46.650 --> 05:50.490 So that's what we specify inside this object we specify type. 05:50.610 --> 05:53.790 And then we're going to use this one to decrement. 05:53.790 --> 05:56.730 So I'm going to specify the type as decrement. 05:56.880 --> 06:01.950 And this would need to match of course what we've put inside here for this case. 06:02.010 --> 06:09.330 Now typically if we were using Redux this way we would make the effort to introduce a bit of type safety 06:09.330 --> 06:14.880 in our application so that instead of typing in a string manually like this, we would actually use 06:14.880 --> 06:20.310 a constant and ensure that we can't make typos when we're dispatching these actions. 06:20.340 --> 06:24.270 I'm not going to worry about doing that for this quick and simple example, because very soon we're 06:24.270 --> 06:28.350 going to take a different approach where we don't need to worry about that. 06:28.380 --> 06:30.450 And then I'm just going to copy this one down. 06:30.450 --> 06:33.090 And I'm going to make this an increment button. 06:33.090 --> 06:40.800 And instead of error I'm just going to give this a color of secondary and update the label to be increment. 06:40.830 --> 06:46.650 And if we go and take a look at our progress, we can see that we now have two buttons one to decrement, 06:46.650 --> 06:47.580 one to increment. 06:47.580 --> 06:49.990 And it will possibly come as no surprise at all. 06:50.020 --> 06:52.870 Because of the simplicity of what we're doing here. 06:52.870 --> 07:00.340 We can click up and we can click down, and we can see this updating accordingly as we'd expect it to. 07:00.370 --> 07:03.340 So it doesn't feel like we've achieved very much there. 07:03.340 --> 07:07.750 But what we do have is global state for our application. 07:07.780 --> 07:11.800 Now this data property could be used anywhere in our application. 07:11.800 --> 07:18.010 We can have buttons that can affect the data property from any part of our application. 07:18.010 --> 07:26.470 And whichever component is using that selector, that state would be rerendered based on that component 07:26.470 --> 07:27.910 being updated. 07:28.420 --> 07:30.190 So pretty useful stuff. 07:30.190 --> 07:35.410 And what we'll take a look at next is just another bit of Redux terminology, because you may come across 07:35.410 --> 07:36.310 this in the world. 07:36.310 --> 07:46.090 And we'll take a look at using action creators and also how we can pass a payload in a dispatch action 07:46.090 --> 07:46.840 as well. 07:46.840 --> 07:49.060 And we'll take a look at that next.