Redux with React Hooks
Explore how to manage application state in React by using Redux Hooks such as useSelector and useDispatch instead of the connect HOC. Understand how to read from and write to the Redux store within functional components, improve render performance with memoization and selector options, and handle asynchronous state updates more effectively.
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';