Redux with React Hooks
Learn how to read data from the store and dispatch actions to write data to the store with the help of Hooks.
We'll cover the following...
With React-Redux v7.1.0, Hooks have officially landed in the official React bindings for Redux. Hooks increase the usability of Redux in React manyfold. While creating a store is much the same, the connect() HOC can be avoided completely. Each method of access (reading or
writing by dispatching actions) can be achieved by Hooks.
The most important Hooks to remember are useSelector and useDispatch, which can be
loosely compared to mapStateToProps and mapDispatchToProps. Following this analogy, the useSelector Hook is used to read data from the store while useDispatch is used to dispatch
actions to write data to the store. React Redux offers a third Hook, useStore, which is not really used in the wild. Its usage should be more of a last resort should you really need access to the store object.
These Hooks can be imported as named imports from react-redux:
import { useSelector, useDispatch, useStore } from 'react-redux';