React Redux Tutorials - 20 - useSelector Hook

useSelector

---

useSelector is the hook which acts as a closed equivalent to the mapStateToProps function.

So it is used to get hold of any state that is maintained in the redux store.

const result: any = useSelector(selector: Function, equalityFn?: Function)

• useSelector accepts a function as a parameter.
• This function is called as a selector function.
• This selector function receives the redux state as its argument.
• The useSelector hook returns whatever is returned by this selector function.

import React from 'react'
import {useSelector} from 'react-redux'

function HooksCakeContainer() {
  
  const numOfCakes = useSelector(state => state.numOfCakes)

  return (
    <div>
      <h2>Num of cakes - {numOfCakes} </h2>
      <button>Buy cake</button>
    </div>
  )
}

export default HooksCakeContainer

🖥

Num of cakes - 10
Buy cake