1 00:00:01,140 --> 00:00:04,170 ‫Let's now start using Redux Toolkit 2 00:00:04,170 --> 00:00:07,740 ‫by converting our store to this new modern way 3 00:00:07,740 --> 00:00:09,363 ‫of writing Redux. 4 00:00:10,860 --> 00:00:13,740 ‫And remember how I said that Redux Toolkit 5 00:00:13,740 --> 00:00:18,090 ‫is 100% compatible with the regular Redux, 6 00:00:18,090 --> 00:00:20,640 ‫which means that we can do this upgrade 7 00:00:20,640 --> 00:00:22,860 ‫in a very gradual way, 8 00:00:22,860 --> 00:00:25,830 ‫so we can start by only converting the store 9 00:00:25,830 --> 00:00:29,310 ‫but leaving our slices as they are 10 00:00:29,310 --> 00:00:31,563 ‫so that's really nice, again. 11 00:00:32,520 --> 00:00:35,730 ‫So, let's now start by, as always, 12 00:00:35,730 --> 00:00:40,730 ‫installing this new tool by writing NPM install 13 00:00:40,830 --> 00:00:44,340 ‫and now it is this @ symbol, 14 00:00:44,340 --> 00:00:45,173 ‫so @reduxJS 15 00:00:48,450 --> 00:00:52,203 ‫and then /toolkit. 16 00:00:53,040 --> 00:00:56,100 ‫So this looks a bit different from what we're used to, 17 00:00:56,100 --> 00:00:59,700 ‫but this is just because this @reduxJS 18 00:00:59,700 --> 00:01:02,490 ‫is basically a namespace 19 00:01:02,490 --> 00:01:05,310 ‫in which the creator of this namespace 20 00:01:05,310 --> 00:01:07,803 ‫then can publish multiple packages. 21 00:01:09,510 --> 00:01:14,220 ‫All right, so let's wait for that to install 22 00:01:14,220 --> 00:01:16,230 ‫and there it is. 23 00:01:16,230 --> 00:01:18,900 ‫And so remember how earlier we saw 24 00:01:18,900 --> 00:01:22,170 ‫that this create store here is deprecated 25 00:01:22,170 --> 00:01:23,940 ‫and so now indeed we will use 26 00:01:23,940 --> 00:01:26,613 ‫the configure store method instead. 27 00:01:30,270 --> 00:01:35,177 ‫So let's import configure store right here 28 00:01:36,450 --> 00:01:39,900 ‫from this package that we just installed. 29 00:01:39,900 --> 00:01:44,280 ‫So this configure store function basically wraps around 30 00:01:44,280 --> 00:01:48,450 ‫create store and adds a few functionalities to it. 31 00:01:48,450 --> 00:01:51,840 ‫So basically, configure store does a lot of things 32 00:01:51,840 --> 00:01:53,700 ‫automatically for us 33 00:01:53,700 --> 00:01:57,210 ‫so it automatically will combine our reducers, 34 00:01:57,210 --> 00:02:00,600 ‫it will automatically add the Thunk middleware, 35 00:02:00,600 --> 00:02:04,980 ‫and it will even automatically set up the developer tools, 36 00:02:04,980 --> 00:02:07,140 ‫so basically this part right here, 37 00:02:07,140 --> 00:02:09,600 ‫so all of this will happen automatically 38 00:02:09,600 --> 00:02:11,370 ‫and then in the end, of course, 39 00:02:11,370 --> 00:02:14,283 ‫our store is created and returned. 40 00:02:15,810 --> 00:02:19,590 ‫Now let's actually first duplicate this file here 41 00:02:19,590 --> 00:02:23,370 ‫so that you can once again also keep 42 00:02:23,370 --> 00:02:25,893 ‫basically the original older version. 43 00:02:27,030 --> 00:02:29,193 ‫So here, let's remove that again. 44 00:02:30,960 --> 00:02:34,500 ‫And then inside our actual store .JS, 45 00:02:34,500 --> 00:02:37,920 ‫we now can get rid of all of this stuff, 46 00:02:37,920 --> 00:02:40,470 ‫so we don't need any of this, 47 00:02:40,470 --> 00:02:44,130 ‫and instead all we need is this configure store. 48 00:02:44,130 --> 00:02:47,460 ‫And then we can also delete all of this 49 00:02:47,460 --> 00:02:52,460 ‫because all we need now is to call configure store 50 00:02:52,680 --> 00:02:56,190 ‫and then we pass it an object of options. 51 00:02:56,190 --> 00:03:01,190 ‫So here we can then specify the root reducer, basically, 52 00:03:01,260 --> 00:03:03,270 ‫so simply the reducer property, 53 00:03:03,270 --> 00:03:07,800 ‫and then, again, an object where we tell Redux Toolkit 54 00:03:07,800 --> 00:03:10,053 ‫about our two reducers. 55 00:03:11,670 --> 00:03:16,670 ‫So let's again call it account, which is account reducer, 56 00:03:16,770 --> 00:03:21,770 ‫and then also again customer, so customer reducer. 57 00:03:22,980 --> 00:03:25,170 ‫And this is actually it 58 00:03:25,170 --> 00:03:28,803 ‫so the result of this will be our store. 59 00:03:30,420 --> 00:03:33,060 ‫So then down there we export that 60 00:03:33,060 --> 00:03:35,610 ‫and so now our application is working 61 00:03:35,610 --> 00:03:38,460 ‫in exactly the same way as before, 62 00:03:38,460 --> 00:03:41,250 ‫and so, again, that's because we can upgrade 63 00:03:41,250 --> 00:03:44,280 ‫gradually to Redux Toolkit. 64 00:03:44,280 --> 00:03:47,610 ‫So see how extremely easy it now is 65 00:03:47,610 --> 00:03:50,310 ‫to set up a Redux application. 66 00:03:50,310 --> 00:03:52,980 ‫All we have to do is to call configure store 67 00:03:52,980 --> 00:03:55,800 ‫and pass it our two reducers. 68 00:03:55,800 --> 00:03:59,400 ‫That's it, nothing else we have to do. 69 00:03:59,400 --> 00:04:03,120 ‫Now then the part where we connect the React application 70 00:04:03,120 --> 00:04:06,750 ‫with Redux works in the exact same way as before 71 00:04:06,750 --> 00:04:09,810 ‫so nothing changes with the React Redux package 72 00:04:09,810 --> 00:04:12,930 ‫that we use on the React site. 73 00:04:12,930 --> 00:04:15,870 ‫All right, so this simplification 74 00:04:15,870 --> 00:04:19,590 ‫of setting up the store is already a huge win, 75 00:04:19,590 --> 00:04:22,200 ‫but React Toolkit can also help us 76 00:04:22,200 --> 00:04:25,680 ‫with writing the state slices themselves. 77 00:04:25,680 --> 00:04:27,600 ‫So here in the customer slice, 78 00:04:27,600 --> 00:04:30,780 ‫we can now basically write this entire logic 79 00:04:30,780 --> 00:04:32,040 ‫in a different way 80 00:04:32,040 --> 00:04:34,713 ‫and so let's see how in the next video.