Learn React Hooks

Adjusting the Login component

Next, we are going to adjust the Login component, where we can use the useDispatch Hook. This process is outlined in the following steps:

1. Edit src/user/Login.js and import the useDispatch Hook, as follows:

import { useDispatch } from '../hooks'

2. Then remove the following Context Hook:

    const { dispatch } = useContext(StateContext)

3. Replace it with our custom useDispatch Hook:

    const dispatch = useDispatch()

Now the Login component makes use of our custom Hook instead of directly accessing the dispatch function. Next, we are going to adjust the Register component.