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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Everything About JavaScript Basics

Frontend Weekly Digest #244 (10–16 January 2022)

Ionic vs. React Native - Which Framework to Choose in 2022?

ionic application development

🇸🇪 MySwedish fluency bits #61, Att vara fel ute

30 Day Typescript Type Challenge — Challenge 14

Building the Unsplash Uploader

Stranger Things alphabet wall scene using vanilla JavaScript

How to add Copy-paste Feature in React Native Expo App

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.

More from Medium

An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-III

Reusable Combobox/Dropdown Component React (Compound pattern)

Passing State in React Router v6: The Bane of the Prop Jockey

A jockey on a horse. He really wants to win.

How to get data back from a redux-saga from inside a React component