Learn React Hooks

Using Hooks for the TodoItem component

Now, we are going to upgrade the TodoItem component to use Hooks. Let's migrate it now:

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

import { useDispatch } from 'react-redux'

3. Additionally, import the toggleTodo and removeTodo action creators:

import { toggleTodo, removeTodo } from '../actions'

4. Now, we can remove the action creator-related props from the function definition. The new code should look as follows:

export default function TodoItem ({ title, completed, id }) {

5. Then, define the Dispatch Hook:

    const dispatch = useDispatch()

6. Finally, adjust the handler functions to call dispatch() ...