WEBVTT 00:00.350 --> 00:06.200 Okay, now let's take a look at achieving the same as what we've achieved here with all of this code. 00:06.530 --> 00:13.640 With the counter reducer, we're going to take a look at replicating that functionality and the Action 00:13.640 --> 00:17.180 creator functions using the Redux toolkit. 00:17.180 --> 00:25.310 Instead, we will keep the part at the top, the counter state or the initial state and the counter 00:25.310 --> 00:26.000 state type. 00:26.000 --> 00:30.710 We still need that functionality, but I'm just going to move the functions down. 00:30.710 --> 00:34.790 And in fact I'm going to change this to increment legacy. 00:34.820 --> 00:40.460 And I appreciate that's going to make our contact page have an error. 00:40.460 --> 00:46.430 But I want to use the same names for these action creators in the Redux toolkit. 00:46.430 --> 00:47.960 We don't need to worry about the name of this. 00:47.960 --> 00:48.830 That's fine. 00:48.830 --> 00:52.910 And we're not really going to be using this code, but I'm just going to leave it behind as an example 00:52.910 --> 00:54.860 and something that we can compare it to. 00:54.890 --> 01:00.050 So we're still going to use the initial state and the type we've already created though. 01:00.080 --> 01:05.990 So the way that we use Redux Toolkit is we deal with Redux in terms of slices. 01:05.990 --> 01:08.270 We have one big overall store. 01:08.300 --> 01:11.720 We can refer to that as the pie if you like. 01:11.720 --> 01:15.410 And our pie can have many slices. 01:15.410 --> 01:17.780 We're going to create a counter slice. 01:17.840 --> 01:24.560 Instead of just calling it a counter reducer we're going to say export const and counter slice. 01:24.680 --> 01:29.840 And we're going to use a function from Redux Toolkit called Create Slice. 01:29.840 --> 01:35.720 Then we open up parentheses and curly brackets and we can give our slice a name. 01:35.720 --> 01:38.060 And I'm going to give it a name of counter. 01:38.720 --> 01:42.650 We pass it the initial state as the second parameter here. 01:42.650 --> 01:47.870 And then we specify the reducers we want inside here. 01:47.900 --> 01:51.710 Now I'm going to say reducers colon open curly brackets. 01:51.710 --> 01:54.200 And then we can specify our function. 01:54.200 --> 01:56.210 So we're going to have an increment function. 01:56.630 --> 01:59.690 And we pass this as parameters. 01:59.690 --> 02:04.730 The states are states inside our slice and the action. 02:04.730 --> 02:10.250 And then we open an arrow function and then curly brackets to open up the body of this function. 02:10.550 --> 02:12.740 And then we can say state dot data. 02:12.740 --> 02:19.460 And then inside here we can and do mutate states because in the background. 02:19.460 --> 02:23.360 And this is some of the magic that comes along with Redux Toolkit. 02:23.540 --> 02:30.770 It uses a library called Emma, which makes it much more or much more convenient for us as developers 02:30.770 --> 02:33.110 to handle state inside Redux. 02:33.140 --> 02:41.330 Now, if I just briefly cross to the documentation for Redux, then one of the most essential bits of 02:41.330 --> 02:44.360 advice is do not mutate states. 02:44.690 --> 02:46.940 And they say it's essential. 02:46.940 --> 02:51.080 And it's one of the most common cause of bugs in Redux applications. 02:51.110 --> 02:53.510 And the way that we did it before. 02:53.510 --> 02:59.180 Inside the reducer function is we used the spread operator, which guarantees that we're not going to 02:59.180 --> 03:00.590 mutate that state. 03:00.620 --> 03:07.420 That's going to create some new states and return new states instead of mutating the states. 03:07.600 --> 03:11.890 Or what I'm about to do here is I'm going to say plus equals action.payload. 03:11.920 --> 03:16.240 Now this 100% is mutating states. 03:16.240 --> 03:17.950 And why am I doing this? 03:17.980 --> 03:24.220 Well, it's because our React Redux toolkit, it comes with this library called IMA, which allows us 03:24.220 --> 03:30.940 to write the code as though we're mutating states, but in the background that we do not see here. 03:30.970 --> 03:36.670 It creates a draft of the current state, and it allows us to mutate the draft state as if this was 03:36.670 --> 03:44.920 mutable states, and then it produces a completely new state object based on our mutations without changing 03:44.920 --> 03:45.700 the original state. 03:45.700 --> 03:52.360 So this is perfectly valid code and is the recommended code to use inside Redux toolkit. 03:52.360 --> 03:59.260 I'm just going to add a decrement function as well, and we'll use the state and the action again as 03:59.260 --> 04:06.490 the arguments open up the body of the request, change the period to an angle brackets, and then we'll 04:06.490 --> 04:11.080 say statedata and then minus equals action.payload. 04:11.440 --> 04:18.010 And then what we need to do is export our two actions here. 04:18.130 --> 04:24.040 So I'll just come down to the bottom or I'll just do it underneath the export here I would typically 04:24.040 --> 04:26.500 put this at the bottom because I've got this like legacy code here. 04:26.500 --> 04:32.410 I'm just going to leave that in place and I'm just going to say export const open curly brackets say 04:32.410 --> 04:36.040 equals counter slice dot actions. 04:36.040 --> 04:42.280 And then inside the curly brackets we're going to export our two reducer functions or actions there. 04:42.280 --> 04:44.800 So I'm going to say increment and decrement. 04:44.950 --> 04:49.450 And now we can go ahead and use these in our contact page. 04:49.450 --> 04:54.580 But before we get there we do need to make an adjustment to our store as well because we handle this 04:54.610 --> 04:55.450 in a different way. 04:55.450 --> 05:00.310 So I'm going to go to our store method and below this function that we're not really going to use anymore. 05:00.340 --> 05:02.200 I'll just keep it in place just in case. 05:02.230 --> 05:06.700 For reference, I'm going to say export const store equals. 05:06.700 --> 05:14.320 And then we're going to use configure store which we get from Redux toolkits and open parentheses open 05:14.320 --> 05:15.310 curly brackets. 05:15.310 --> 05:20.530 And then we specify the reducer inside here open more curly brackets. 05:20.530 --> 05:23.380 And I'm going to give the reducer a name of counter. 05:23.410 --> 05:27.610 Add a colon and then say counter slice dot reducer. 05:28.120 --> 05:33.280 And this is what we're going to use as our store for our React Redux provider. 05:33.280 --> 05:34.720 So back to Main.ts. 05:34.960 --> 05:39.760 Let's remove what we have here the const store from configure the store. 05:39.760 --> 05:41.980 And we don't need that console.log either. 05:41.980 --> 05:45.130 So let's just remove the import here as well. 05:45.130 --> 05:51.010 And for our store because we've called it store and we're exporting it, we can then just add the import 05:51.010 --> 05:52.990 from App Store store. 05:53.350 --> 05:58.090 And that's now going to be using the Redux toolkit version of what we've done. 05:58.090 --> 06:01.060 Just one more small change to make in our contact page. 06:01.060 --> 06:07.490 If I just come up here, let's just remove the decrement and the increment. 06:07.490 --> 06:11.570 I'll keep the counter state as we're using it here for the time being. 06:11.570 --> 06:15.680 And I'll, I'll bring in the decrement. 06:15.710 --> 06:19.760 I'll update the import from counter reducer. 06:19.760 --> 06:21.860 And I've still got an error actually. 06:21.860 --> 06:23.930 And the reason for the error. 06:23.960 --> 06:29.210 Let's bring in the other one as well, is we no longer have a default value for our different functions 06:29.210 --> 06:29.420 here. 06:29.420 --> 06:36.620 So I'm just going to specify one and one fully decrement and the increment and keep this one as five. 06:36.740 --> 06:38.840 So now we're back to where we were before. 06:38.840 --> 06:46.970 But what we've got now is a much smaller piece of code for our reducer function, our action creators. 06:46.970 --> 06:53.210 We don't have that nasty looking switch statement that we needed in the original version of just using 06:53.210 --> 06:54.080 Redux. 06:54.080 --> 06:59.450 And we've got some convenience in how we create this code as well, in the fact that we don't need to 06:59.480 --> 07:05.720 worry about the biggest problem that developers had with Redux previously, which is state mutation. 07:05.780 --> 07:09.500 It's just something we don't need to worry about when we're using the Redux toolkit. 07:09.500 --> 07:16.310 So all of these are big advantages and a smaller amount of code, and it's cleaner as well. 07:16.310 --> 07:19.460 But let's make sure it still works after hyping it up. 07:19.460 --> 07:22.190 So I'll just refresh the page, make sure everything's clean. 07:22.190 --> 07:28.760 And there's the first problem is we're we're not using the same kind of selector anymore. 07:28.790 --> 07:32.060 And in fact that's a bit of adjustment we do need to make. 07:32.060 --> 07:38.360 I think we should be able to get the let's see if I use the selector here in this way instead of state 07:38.360 --> 07:39.380 dot data. 07:39.380 --> 07:46.430 What we should be using now is states and say goes to state dot counter. 07:46.460 --> 07:49.220 Yeah, we need to use this in a slightly different way. 07:49.250 --> 07:49.550 Now. 07:49.550 --> 07:52.880 I thought I might be able to get away with that, but we do not. 07:52.880 --> 07:54.260 So let's go back to our store. 07:54.410 --> 08:01.880 TS there's a bit more work we need to do here, and we're going to make our Redux functionality TypeScript 08:01.900 --> 08:02.740 happy. 08:02.890 --> 08:06.910 So to do that, I'm going to export a type and I'm going to call it route. 08:06.940 --> 08:10.090 State equals return type. 08:10.690 --> 08:13.870 And by the way this TypeScript is going to seem a little bit complicated. 08:13.870 --> 08:19.720 But I'm really just getting it from the documentation in the Redux Toolkit docs. 08:19.720 --> 08:24.970 They do suggest if I come to let's see, is it in tutorials? 08:24.970 --> 08:26.590 The TypeScript quick start. 08:26.590 --> 08:32.590 And what I'm doing here is really just using this define typed hooks, which allows us to create better 08:32.590 --> 08:36.730 typed versions of the use dispatch and use selector that we had earlier on. 08:36.730 --> 08:41.590 So if we do come to the documentation, then we can see the kind of thing that we're using here. 08:41.590 --> 08:45.430 And this has actually been updated since I looked at this. 08:45.460 --> 08:52.270 It looks a bit more convenient to use now than what we used previously, an older version of the documentation. 08:52.390 --> 08:57.850 So probably worth coming in to look at this, because this is a bit cleaner than what we used before. 08:57.880 --> 09:04.540 And I'm just going to copy this and I'm going to come back to the code and instead of what I had there, 09:04.540 --> 09:06.190 I'm just going to paste this in. 09:06.190 --> 09:11.830 And then we can just bring in, use dispatch and add the import from React Redux and say use selector, 09:12.040 --> 09:13.690 update the imports. 09:14.200 --> 09:16.060 And we also need these types as well. 09:16.060 --> 09:17.380 So back to the documentation. 09:17.380 --> 09:21.460 And just above this we should have the two types. 09:21.460 --> 09:26.530 And it's this route states and the App dispatch. 09:26.530 --> 09:28.750 So I'm just going to copy these two lines as well. 09:28.750 --> 09:30.910 We don't need the App Store for anything we're doing. 09:31.120 --> 09:34.960 So I'm just going to copy or paste those two in there. 09:34.960 --> 09:37.210 And I don't need that comment either. 09:37.240 --> 09:37.810 Okay. 09:37.840 --> 09:45.850 So the idea being that instead of using use dispatch and use selector, we use use app dispatch and 09:45.850 --> 09:47.350 use app selector. 09:47.350 --> 09:52.150 And that gives us better type safety when we're using our Redux store. 09:52.150 --> 09:58.300 So I'll go back to the contacts page and instead of use selector I'm going to say use app selector. 09:58.300 --> 10:00.910 And then state goes to state Dot. 10:00.910 --> 10:08.140 And then we've got access to our counter slice and then instead of using dispatch, we can use app dispatch 10:08.170 --> 10:09.190 instead. 10:09.190 --> 10:13.060 And let's just clean up things from the top here as well. 10:13.480 --> 10:17.050 And we don't need the counter state in here anymore either. 10:17.050 --> 10:23.350 And then as far as data goes, because we're getting this from our counter slice, then this needs to 10:23.350 --> 10:28.450 be in curly brackets and everything should be good now. 10:28.450 --> 10:30.670 So let's go take a look at our browser. 10:30.670 --> 10:35.410 And if we refresh the page then we've got our contact page back. 10:35.410 --> 10:37.120 We've got the data back to be in 42. 10:37.150 --> 10:38.620 If we increment we go up. 10:38.620 --> 10:40.090 If we decrement, we go down. 10:40.090 --> 10:44.290 And if we increment by five then that's got the desired effect. 10:44.440 --> 10:52.510 And Redux will be much more easy convenient to use with those changes and the use of Redux toolkit. 10:52.510 --> 10:58.600 And another advantage of using Redux is we get access to one of the best developer tools I think I've 10:58.600 --> 11:03.310 ever seen, and we're going to take a look at what that is next.