Simplify React Redux Development With Redux Toolkit

[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.