1 00:00:01,156 --> 00:00:05,280 ‫Now that we understand the fundamentals of Redux, 2 00:00:05,280 --> 00:00:07,560 ‫it's time to take the next step 3 00:00:07,560 --> 00:00:11,370 ‫and learn about the modern way of writing Redux, 4 00:00:11,370 --> 00:00:13,743 ‫which is Redux Toolkit. 5 00:00:15,210 --> 00:00:16,830 ‫So, as I just said, 6 00:00:16,830 --> 00:00:21,570 ‫Redux Toolkit is the modern way of writing Redux code, 7 00:00:21,570 --> 00:00:24,060 ‫and it's advised by the Redux team 8 00:00:24,060 --> 00:00:28,980 ‫to now prefer Redux Toolkit over classic Redux. 9 00:00:28,980 --> 00:00:33,030 ‫That's because Redux Toolkit is an opinionated approach 10 00:00:33,030 --> 00:00:36,390 ‫that forces everyone to use best practices 11 00:00:36,390 --> 00:00:39,900 ‫that the community has learned over the years. 12 00:00:39,900 --> 00:00:44,700 ‫So, basically, Redux Toolkit took all these best practices 13 00:00:44,700 --> 00:00:49,350 ‫and placed them into this new way of writing Redux. 14 00:00:49,350 --> 00:00:50,640 ‫Now does this mean 15 00:00:50,640 --> 00:00:54,900 ‫that everything that you just learned is obsolete? 16 00:00:54,900 --> 00:00:57,150 ‫Well, not at all. 17 00:00:57,150 --> 00:00:59,580 ‫First, without these fundamentals, 18 00:00:59,580 --> 00:01:02,970 ‫it's very hard to understand Redux Toolkit 19 00:01:02,970 --> 00:01:07,830 ‫because it is built on top of classic Redux, of course. 20 00:01:07,830 --> 00:01:11,400 ‫And, second, both ways of writing Redux 21 00:01:11,400 --> 00:01:15,120 ‫are 100% compatible with each other. 22 00:01:15,120 --> 00:01:19,470 ‫So you can actually use classic Redux in one part of the app 23 00:01:19,470 --> 00:01:22,290 ‫and Redux Toolkit in another part 24 00:01:22,290 --> 00:01:24,690 ‫if that's what you want to do. 25 00:01:24,690 --> 00:01:29,550 ‫Okay, so that all sounds great, but what's the big deal? 26 00:01:29,550 --> 00:01:34,140 ‫So what are the actual advantages of Redux Toolkit? 27 00:01:34,140 --> 00:01:36,960 ‫Well, the biggest advantage is certainly 28 00:01:36,960 --> 00:01:41,400 ‫that Redux Toolkit allows us to write a lot less code 29 00:01:41,400 --> 00:01:45,060 ‫to achieve the exact same result as before. 30 00:01:45,060 --> 00:01:49,260 ‫So we say that we need a lot less boilerplate code, 31 00:01:49,260 --> 00:01:53,160 ‫which is basically code that only sets things up 32 00:01:53,160 --> 00:01:56,310 ‫but doesn't really do anything meaningful. 33 00:01:56,310 --> 00:01:59,430 ‫And so Redux Toolkit hides all that stuff, 34 00:01:59,430 --> 00:02:03,600 ‫like setting up middleware and the developer tools. 35 00:02:03,600 --> 00:02:08,070 ‫So out of the box Redux Toolkit gives us many things. 36 00:02:08,070 --> 00:02:10,260 ‫But the three highlights are, 37 00:02:10,260 --> 00:02:12,840 ‫first, it allows us to write code 38 00:02:12,840 --> 00:02:17,340 ‫that actually mutates state inside reducers. 39 00:02:17,340 --> 00:02:20,610 ‫Now behind the scenes a library called Immer 40 00:02:20,610 --> 00:02:24,750 ‫will convert our code back to non-mutating, 41 00:02:24,750 --> 00:02:27,090 ‫so like the one that we have been writing 42 00:02:27,090 --> 00:02:28,530 ‫up until this point, 43 00:02:28,530 --> 00:02:31,020 ‫but the new code that we're gonna write 44 00:02:31,020 --> 00:02:36,020 ‫will look as if we were mutating the state object directly. 45 00:02:36,300 --> 00:02:37,800 ‫And, in my opinion, 46 00:02:37,800 --> 00:02:42,480 ‫this is really the biggest advantage of using Redux Toolkit, 47 00:02:42,480 --> 00:02:46,110 ‫because if you have a pretty complex state object 48 00:02:46,110 --> 00:02:49,110 ‫with nested objects and arrays, 49 00:02:49,110 --> 00:02:54,110 ‫this can actually be a game-changer in reducing complexity. 50 00:02:54,330 --> 00:02:58,740 ‫Redux Toolkit also automatically creates action creators 51 00:02:58,740 --> 00:03:00,810 ‫from our reducers, 52 00:03:00,810 --> 00:03:04,080 ‫and this can be quite helpful as, again, 53 00:03:04,080 --> 00:03:07,080 ‫it helps us writing less code. 54 00:03:07,080 --> 00:03:08,430 ‫It can, however, 55 00:03:08,430 --> 00:03:12,360 ‫also create some additional work in some situations 56 00:03:12,360 --> 00:03:15,720 ‫as we will experience in practice soon. 57 00:03:15,720 --> 00:03:18,210 ‫And, finally, Redux Toolkit 58 00:03:18,210 --> 00:03:21,990 ‫will also automatically set up Thunk middleware 59 00:03:21,990 --> 00:03:23,940 ‫and the developer tools 60 00:03:23,940 --> 00:03:26,730 ‫so that we can focus on writing code 61 00:03:26,730 --> 00:03:30,063 ‫that actually does something in the application. 62 00:03:30,990 --> 00:03:34,830 ‫Alright, and this should be enough of an introduction, 63 00:03:34,830 --> 00:03:36,933 ‫and so let's head back to code.