Applying the useSelector and useDispatch Redux Hooks to Additional Components

InstructorJamund Ferguson

Share this video with your friends

Send Tweet

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!?

  1. import useSelector and useDispatch
  2. Copy the body of mapStateToProps to the top of your component and convert each line to its own variable, pulled in with useSelector hook
  3. If needed, create a dispatch function with useDispatch()
  4. Replace any dispatched actions with either a direct call to dispatch or create a function with the same name as the variable.
  5. Remove any now un-needed props
  6. Delete propTypes, mapStateToProps and the mapDispatchToProps function
  7. You can also remove connect() but we saved that for another lesson :D