Learn React Hooks

Using Hooks for the AddTodo component

Now that we have learned about the Dispatch Hook, let's see it in action by implementing it in our AddTodo component.

Let's migrate the AddTodo component to Hooks now:

1. First delete the src/containers/ConnectedAddTodo.js file.
2. Now, edit the src/components/AddTodo.js file and import the useDispatch Hook from react-redux:

import { useDispatch } from 'react-redux'

3. Additionally, import the addTodo action creator:

import { addTodo } from '../actions'

4. Now, we can remove the props from the function definition:

export default function AddTodo () {

5. Then, define the Dispatch Hook:

    const dispatch = useDispatch()

6. Finally, adjust the handler function and call dispatch():

    function handleAdd () { if (input) ...