Applying the useSelector and useDispatch Redux Hooks to Additional Components
In this lesson we quickly migrate our <RateTable> and <CurrencyCodePicker> to the Redux Hooks API. Nothing new is covered here that isn't covered in our previous lessons, but I am hoping it will be useful to practice this technique and also to see how rapidly we can convert these components to the new syntax.
What's stopping you from using these techniques in your own app!?
import useSelectoranduseDispatch- Copy the body of
mapStateToPropsto the top of your component and convert each line to its own variable, pulled in withuseSelectorhook - If needed, create a
dispatchfunction withuseDispatch() - Replace any dispatched actions with either a direct call to
dispatchor create a function with the same name as the variable. - Remove any now un-needed props
- Delete propTypes,
mapStateToPropsand themapDispatchToPropsfunction - You can also remove
connect()but we saved that for another lesson :D
Jamund Ferguson: [0:02] Open up RateTable.js and make sure that you import { useSelector } from "react-redux". Scroll down to the mapStateToProps() function and copy over the function body. At the top of your component, paste that in and turn these into their own variables, const name, const amount, and const rates.
[0:21] For each of these we'll apply the useSelector hook to get the value. Const name = useSelector(getName). Const amount = useSelector(getAmount). Const rates = useSelector(getRates).
[0:37] Now we can remove the props at the top of the file and remove our propTypes and mapStateToProps function. We'll replace mapStateToProps in our connect function with null.
[0:50] Open up CurrencyCodePicker and import { useSelector, useDispatch } from "react-redux". At the top of the component, type const dispatch = useDispatch. Then go down to the bottom of the component and in our mapDispatchToProps() function we'll copy over the currencyCodeUpdate() method.
[1:09] Back in our component, we'll replace our call to currencyCodeUpdate with dispatch(updateCurrencyCode(currencyCode)). We'll also remove the currencyCodeUpdate method from our props list.
[1:23] Now go down to the mapStateToProps function and copy the function body to the top of the component. Convert both of these to variables by typing const currencyCode and const supportedCurrencies, and then use the selector hook to get the values, = useSelector(getCurrencyCode) and = useSelector(getSupportedCurrencies).
[1:47] With that in place, we can remove our two props and remove our propTypes, as well as the mapStateToProps and mapDispatchToProps functions. We'll simply remove both of those from our connect method.
[2:01] Here in the CurrencyCodePicker we've used the useDispatch hook and useSelector hook to replace our legacy Redux implementation with the modern hooks-based implementation. The rest of our component didn't really notice the difference except for one small change in our onChange handler, where we manually dispatched the updateCurrencyCode action creator.
[2:22] If we go back to our app, we can see that changing the currency code still triggers an update to our Rates Table.