Dispatching Actions to Redux when an Input Field Fires its Blur Event with TypeScript

The Redux Style Guide explicitly recommends that you avoid putting form state in redux. Of course we do want to update our redux store with data that comes from user input at times, so how do we do it? Well, waiting until the form elements blurs is a good way. Otherwise you can imagine we'd be constantly dispatching redux actions and potentially re-rendering our whole app on every key press!

The other thing I wanted to demonstrate from this lesson was using the React.FocusEvent type when handling form events. It's very common for people to say e: any and lose type support on event handlers, but I think it's much nicer to provide the correct types where possible. Once you get the hang of it, it's very easy.

A full list of React Events can be found here: https://reactjs.org/docs/events.html#supported-events

I also found the following resources to contain helpful information about typing react events:

• https://felixgerschau.com/react-typescript-events/
• https://fettblog.eu/typescript-react/events/