How to Dispatch Actions With Redux
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:10] Dispatch the actions. Open SRC, up TSX. Define the "is drawing" flag. Conest is "drawing". We'll get it using "use selector".
[00:11 - 00:18] Pass in the root state. Use selector is a generic hook that allows you to provide the type of the state from which you're trying to get filled.
[00:19 - 00:29] Define the function that will get the state. And then it will return a boolean from state, current. Stroke points length.
[00:30 - 00:34] Points array has length. That means that we're currently drawing the current stroke.
[00:35 - 00:41] So we store the state in a boolean flag called "is drawing". In "produce selector" and the root state.
[00:42 - 00:49] Now get the dispatch function. Conest to dispatch equals use dispatch. Now let's edit the start drawing function.
[00:50 - 00:58] Start drawing. We'll now get the native event. Native event. Here I'm destructuring the regular event and getting the native event filled from it.
[00:59 - 01:10] The type is "react mouse event" on HTML. Convas element. We can actually get rid of react here and import mouse event.
[01:11 - 01:25] Mouse event from react. All right. Now that we have the event, we can get offset X and offset Y. Conest offset X offset Y from native event.
[01:26 - 01:37] And then we dispatch begin stroke with offset X and offset Y. Impert the begin stroke from actions and update the draw function.
[01:38 - 02:04] Here we also receive the native event. We can copy the definition of the argument from the start drawing function. Inside of the body we check if we are not drawing. Then we return. Otherwise we get the offset X and offset Y from the native event and dispatch the update stroke with offset X and offset Y.
[02:05 - 02:14] And finally let's define the end drawing. Here we don't need to get any sort of event. We just check if we are drawing with dispatch and stroke.
[02:15 - 02:19] And we don't need to pass any arguments to it. Good job, now our application is dispatching the actions.
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)