How to Dispatch Actions With Redux

You can find the working example for this lesson in the code/04-redux/04.12-dispatch-actions folder.

In src/App.tsx, import the useDispatch and useSelector from react-redux:

xxxxxxxxxx

import { useSelector, useDispatch } from "react-redux"

Import React, we are going to use the events types from it:

xxxxxxxxxx

import React, { useRef, useEffect } from "react"

Import the action types that we are going to dispatch:

xxxxxxxxxx

import { beginStroke, endStroke, updateStroke } from "./actions"

We are going to need a flag that will tell us that we are currently drawing a stroke. We know that we've started drawing if there is at least one point in the current stroke points array. So we can calculate it by converting the current stroke points array length to a boolean.

Define this flag below the getCanvasWithContext function:

xxxxxxxxxx

const isDrawing = useSelector<RootState>(

  (state) => !!state.currentStroke.points.length

)

Here we used the useSelector hook. This hook is generic and you can provide the state and the return value types. In our case we specified the type of the state as the RootState. You need to import this type: