Simplify React Redux Development With Redux Toolkit
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:06] Using Redux Toolkit. Redux Toolkit is an official toolset for Redux development provided by the Redux team.
[00:07 - 00:13] It simplifies the setup and adds a bunch of neat tools that simplify developing Redux-based applications. Let's upgrade our application to use it.
[00:14 - 00:17] Install Redux Toolkit, Yarn. Add, Add.
[00:18 - 00:19] Redux. JS.
[00:20 - 00:23] Toolkit. After it's installed, you can remove the Redux package.
[00:24 - 00:24] Yarn. Remove.
[00:25 - 00:27] Redux. Alright, Redux is removed.
[00:28 - 00:31] Now it's time to configure the store. Open SRC.
[00:32 - 00:34] Store TS. And remake it.
[00:35 - 00:41] Instead of create store, we are now going to be using configure store. We remove create store apply middle where our combined reducers from Redux.
[00:42 - 00:53] Impert configure store from Redux Toolkit. And instead of combine reducers, we are now passing an options object, where reducers are passed inside of the reducer object.
[00:54 - 01:02] Reducer, and here we pass everything that we want to combine into one reducer. We also remove the middle where that we used to have here.
[01:03 - 01:15] Now it is passed as middle where field of the same options object. We pass a function that will receive get default middle where and we will be able to call get default middle where concat logger.
[01:16 - 01:19] Remove the compose with DevTools import. We don't need it anymore.
[01:20 - 01:30] The get default middle where function provides a bunch of handy middle where. For example, it provides the immutability check middle where, the checks you don't mutate the state in your reducers.
[01:31 - 01:37] It will throw an error if you do. Answer as ability check middle where, the checks if your state does not contain non-serializable data.
[01:38 - 01:50] For example, function symbols, promises or other non-data values. The configure store now accepts the options object that allows us to have named parameters instead of positional like we used before.
[01:51 - 01:58] Now we can specify values by the name which reduces the probability of making an error. You can, you've probably noticed that we have a bunch of type errors.
[01:59 - 02:09] That's because Redux toolkit expects reducers to accept actions with optional payloads. The only reducer that doesn't cause an error here is the history index.
[02:10 - 02:13] And that's because of the redo action. That doesn't have the payload property.
[02:14 - 02:30] To fix the other reducers, let's add the any action type to their union action types. Open the current stroke actions import any action from Redux.js toolkit and add it to the action type definition.
[02:31 - 02:37] Any action or other parts of the union. If you look at the store, you now can see that current stroke is fixed.
[02:38 - 02:47] Now let's fix the strokes reducer. Then strokes actions import the any action and add it to the action type definition.
[02:48 - 02:52] Any action. The errors in the store are gone and your app should continue working.
[02:53 - 02:55] Want you to verify the setup. Yarn start.
[02:56 - 03:00] You should still be able to draw the strokes undo and redo them and also select the colors.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)