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/
Jamund Ferguson: [0:00] Back in cartSlice.ts, add an additional reducer called updateQuantity. updateQuantity is going to take state. We're going to type the action with a PayloadAction. That's an object with an id of string and a quantity which will be a number.
[0:00]
[0:16] We will then read the id and quantity off of action.payload using the destructuring syntax. Then, we'll type state.items [id] = quantity. After we do that, let's go down here to our actions and export the updateQuantity action. Open up Cart.tsx and import the updateQuantity action from cartSlice.
[0:00]
[0:36] Just before our return statement, let's add a new function called onQuantityChanged. onQuantityChanged is going to take two arguments. The first one, which we'll call e, is going to be a React.FocusEvent. We're going to pass into that the type of element that lost focus, the HTMLInputElement. The second argument is going to be an id of a string.
[0:00]
[0:58] Here in our function, we'll type const quantity = Number(e.target.value). Remember that e.target.value is going to be a string. As we pull it off the input field, we need to convert that to a number. If for some reason that's going to be not a number or undefined, we will return zero. Then, we'll dispatch updateQuantity with the id and a new quantity.
[0:00]
[1:22] Now that we have this method for handling onBlur, let's go down to our input field. We'll say onBlur={}. Then, create an arrow function that takes the FocusEvent and we'll pass it to onQuantityChanged along with the id that we're mapping over.
[0:00]
[1:39] With this in place, when we go back to our app, we add some products here, here, and here. We head to our shopping cart. As we update these numbers, the total changes and the quantity up here in the upper-right corner updates as well.
[0:00]