Redux and Hooks… friends or foe?

  1. useSelector: pass in a function that takes the state as an argument and returns a value. This can act as a replacement for mapStateToProps.
  2. useDispatch: returns a reference to the dispatch object. This can also act as a replacement to mapDispatchToProps.
  1. You save time by not writing the connect function any time you need to access store, and removing it when you no longer need to access store. No endless wrappers in react dev-tools.
  2. You have clear distinction and no conflicts between props coming from connect, props coming from parent and props injected by wrappers from 3rd party libraries. (props aren’t diluted with the store components, so props are actual props)
  3. Sometimes you (or fellow developers you work with) will choose unclear names for props in mapStateToProps and you will have to scroll all the way to mapStateToProps in the file to find out which selector is used for this specific prop. This is not the case with hooks where selectors and variables with data they return are coupled on the same line.
  4. By using hooks you get general advantages of hooks, the biggest of which is being able couple together and reuse related stateful logic in multiple components.
// BEFORE
// AFTER

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
syd

syd

software engineer. red wine addict. obsessed with vintage cars and jewelry.