How to Dispatch Actions With Redux

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