Learn React Hooks

Using Hooks for the TodoList component

First, we are going to implement a Selector Hook to get all todos for the TodoList component, as follows:

1. First delete the src/containers/ConnectedTodoList.js file.
2. Now, edit the src/components/TodoList.js file, and import the useSelector Hook from react-redux:

import { useSelector } from 'react-redux'

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

export default function TodoList () {

4. Then, we define two Selector Hooks, one for the filter value, and one for the todos value:

    const filter = useSelector(state => state.filter)    const todos = useSelector(state => state.todos)

5. Now, all that is left to do is to replace the ConnectedTodoList component with the TodoList component in